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>

直到现在代码运行顺利。

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

首先检查imageSize是否小于300KB。
然后它将检查尺寸是否小于1200x1200
如果文件小于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)个对象

Jquery图像预览错误

要求：

1 个答案: