Wednesday, 1 January 2014

Jquery Image Validation

1 ) jQuery validator method

jQuery.validator.addMethod('img_ext',function(value,element){
        if(value=="")
        {
            return true;
        }
        //alert(element.files[0].size);
        var ext_index=value.lastIndexOf('.');
        var ext=value.substring(ext_index+1);
        var ext_lcase=ext.toLowerCase();
        if(ext_lcase=='jpeg' || ext_lcase=='jpg' || ext_lcase=='png' || ext_lcase=='gif')
        {
            return true;
        } else {
            return false;
        } }, "Please select valid image file" );

Html

<input name="logo_image1" type="file"  class="required img_ext" id="logo">

2)  $('#addAlbum').validate({
            ignoreTitle: true,
                rules: {
                        "image":
                        {
                            required: true,
                            accept: 'jpg|png|gif|jpeg'
                        },
 messages: {
                    "image":
                     {
                        required: 'This field is required.',
                        accept: 'Please upload valid file formats'
                     }
   });

Html 

 <input type="file" onchange="document.getElementById('file_fake').value = this.value.replace(/.*?[\/\\]([^\/\\]+)$/, '$1')"
                             class="file_select imgupload" name="image"  id="attachImg1"/>

3) validating size and type

$('#attachImg').change(function(){
                var input = document.getElementById("attachImg"),formdata = false;               
                if (window.FormData) {
                    formdata = new FormData();
                }   
                file = input.files[0];       
                formdata.append("upload", file);
               
                var t=$(this);
               
                if (formdata) {
                    $.ajax({
                        url:ajax_url+"Members/ajax_image_validation/700/700",
                        type: "POST",
                        data: formdata,
                        processData: false,
                        contentType: false,
                        cache:false,
                        success: function (resp) {
                                    if(resp!='ok')
                                    {
                                        alert(resp);
                                        $("#file_fake1").val('');
                                            $("#attachImg").attr('value','');
                                       
                                    }
                                                                  
                                   
                        }
                    });
                }
        });
Html
<input type="file" onchange="document.getElementById('file_fake').value = this.value.replace(/.*?[\/\\]([^\/\\]+)$/, '$1')"
                             class="file_select imgupload" name="image"  id="attachImg1"/>

In method: 
    function ajax_image_validation($x,$y){
   
        if(is_uploaded_file($_FILES['upload']['tmp_name']))
        {
            $imgName = pathinfo($_FILES['upload']['name']);          
            $ext = strtolower($imgName['extension']);
            if($ext=='tiff' || $ext=='jpeg' || $ext=='png' || $ext=='jpg')
            {
                list($width,$height)= getimagesize($_FILES["upload"]["tmp_name"]);
                if($width >= $x && $height >= $y)
                {
                    echo "ok";  
                }else{
                    echo "Image dimensions should be (".$x." x ".$y.") or greater";
                }
            }else{
                echo "Invalid file format";
            }
        }
        die;
    }

0 comments:

Post a Comment