Jquery Image preview error

Question

The requirement:

I am trying preview an image before uploading. So I come up with this code:

function readURL(input) 
{
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}

And I am calling the function by this method:

$(document).ready(function(){
    $('#image').on('change',function(e){
       readURL(this);
    });
});

The code is working fine. Now the HTML is this:-

<div class="control-group">
  <label class="control-label" for="fileInput"><?php echo ucfirst($entity); ?> Image :</label>
  <div class="controls">
    <input class="input-file uniform_on" name="image" id="image" type="file"/>
  </div>
</div>
<div class="control-group">
  <label class="control-label" for="fileInput">Image Preview:</label>
  <div class="controls">
    <img src="#" name="preview" id="preview" height="100" alt="Preview Image"/>
  </div>
</div>

Till now the code is running smooth.

Now I want to update my code based on these requirements:-

1. First the imageSize will be checked, whether it's less than 300KB.
2. Then it will check if the dimension is less than 1200x1200
3. If the file is less than 300KB and size less than 1200x1200, then the preview will be displayed.

So I made the following changes:-

var maxImageSize = parseInt(3000) * 100; //3KB * 100 = 300KB        
var maxImageWidth = 1200;
var maxImageHeight = 1200;

function readURL(input) 
{
    if (input.files && input.files[0]) 
    {
        var reader = new FileReader();
        reader.onload = function (e) {
            $('#preview').attr('src', e.target.result);
        }
        reader.readAsDataURL(input.files[0]);
    }
}



$(document).ready(function(){
    $('#image').on('change',function(e){
        var imageSize = this.files[0].size;
        if(imageSize > maxImageSize)
        {
            if(maxImageSize>=1000 && maxImageSize<1000000)
            {
                var allowedSize = parseFloat(parseInt(maxImageSize)/1000)+' KB';
            }
            else if(maxImageSize>=1000000)
            {
                var allowedSize = parseFloat(parseInt(maxImageSize)/1000000)+' MB';
            }
            var $el = $('#image');
            $el.wrap('<form>').closest('form').get(0).reset();
            $el.unwrap();
            var html = '<strong>Severe Error</strong><p>Max. filesize allowed is '+allowedSize+'</p>';
            $('#modalError').html(html);
            $('#modalError').show();
            $('#modal').modal();
        }
        else
        {
            var imgFile = this.files[0];
            var img = new Image();
            img.src = window.URL.createObjectURL(imgFile);
            img.onload = function() {
                var imgField = $('#image');
                var imgWidth = img.naturalWidth, imgHeight = img.naturalHeight;
                if(imgWidth>maxImageWidth && imgHeight>maxImageHeight)
                {
                    var html = '<strong>Severe Error</strong><p>Max. width allowed is '+maxImageWidth+'px & Max. height allowed is '+maxImageHeight+'px</p>';
                    $('#modalError').html(html);
                    $('#modalError').show();
                    $('#modal').modal();
                }
                else
                {
                    readURL(imgField);
                }                   
            };
        }
    });
});

In the above code, the size and dimension validation is working fine. However, the image is not getting previewed.

What am I doing wrong?

Answer 1

You are passing an <img> to readURL instead of a File object at readURL(imgField)