javascript - Jquery图片预览错误

Question

要求:

我正在尝试在上传之前预览图像。所以我想出了这段代码:

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){
       readURL(this);
    });
});

代码运行良好。现在 HTML 是这样的:-

<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>

目前代码运行顺利。

现在我想根据这些要求更新我的代码:-

1. 首先会检查 imageSize，是否小于 300KB。
2. 然后它会检查尺寸是否小于 1200x1200
3. 如果文件小于 300KB，大小小于 1200x1200，则会显示预览。

所以我做了以下更改:-

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);
                }                   
            };
        }
    });
});

在上面的代码中，尺寸和尺寸验证工作正常。但是，图像无法预览。

我做错了什么？

Answer 1

您正在传递 <img>至readURL而不是File对象位于 readURL(imgField)