Chrome 上传图片不再有效；其他浏览器没问题

Question

我们最近实现了会员上传图片的功能。它已经工作了几个月。最近它在 Chrome 中停止工作，但在 Firefox、Safari 和 Internet Explorer 中继续工作。

Chrome 生成的错误消息如下：

未捕获类型错误：无法在 'HTMLInputElement' 上设置 'files' 属性：提供的值不是 'FileList' 类型。

出现问题的代码段如下：

    $(window).load(function()
    {
        var aFiletypesAllowed = ["png","gif","jpeg","jpg"];
        var FileTypesPrintable = 'png, gif, jpeg, jpg"';
        var form = document.getElementById('image-submit');
        var options =
        {
            thumbBox: '.thumbBox',
            imgSrc: ''
        }
        var cropper = $('.imageBox').cropbox(options);
        $('#file').on('change', function()
        {
            var reader = new FileReader();
            reader.onload = function(e)
            {
                options.imgSrc = e.target.result;
                cropper = $('.imageBox').cropbox(options);
            }
            reader.readAsDataURL(this.files[0]);
            this.files = [];
            fileSize = this.files[0].size;
            fileName = this.value;
        })
        $('#btnCrop').on('click', function()
        {
            //file validation
            var filetype = fileName.split('.').pop().toLowerCase();
            fileWidth = cropper.getWidth();
            fileHeight = cropper.getHeight();

            //check file type
            if (aFiletypesAllowed.indexOf(filetype) < 0)
            {
                var filenameUsed = fileName.split('\').pop();
                jConfirm('Invalid Filetype', filenameUsed + ' is not an allowed file type. Allowed filetypes are ' + FileTypesPrintable, '', '', '', '', '', '', '', '', 180);
                document.getElementById('file').value = '';
            }
            //check image dimensions -- at least one dimension must be over the limit to ensure a crop occurs, and the image is modified in some way
            else if (fileWidth < 200 && fileHeight < 200)
            {
                jConfirm('Image too Small', 'Minimum allowed image size is 200 x 200. Your image is ' + fileWidth + ' x ' + fileHeight + '. Please choose a larger image.', '', '', '', '', '', '', '', '', 180);
                document.getElementById('file').value = '';
            }
            //validation passed, perform crop
            else
            {
                var img = cropper.getDataURL();
                $('.cropped').html('<img id="cropped-img" src="'+img+'">'); //image to display
                $('#cropped-to-send').val(img); //dataURL to upload
            }
        })

错误消息似乎是由代码行 "this.files = [];" 生成的。发生该错误后，第 "var filetype = fileName.split('.').pop().toLowerCase();" 行将引发另一个错误。该行的错误是 "fileName is not defined".

如上所述，此功能运行在 Chrome 中可以正常使用几个月，并且在 Firefox、Safari 和 Internet Explorer 中继续正常工作。

Answer 1

我不太明白这个功能是怎么实现的，因为它是另一个程序员基于一个库实现的。但是，在检查代码时，一行 "this.files = [];" 似乎有问题。初始化一个空数组；然后接下来的两行尝试访问该数组的元素以供以后使用。当然，它们将是空的。

所以凭直觉，我重新安排了一些台词的顺序。上面代码的行如下：

 reader.readAsDataURL(this.files[0]);
 this.files = [];
 fileSize = this.files[0].size;
 fileName = this.value;

我将它们重新排列如下：

reader.readAsDataURL(this.files[0]);
fileSize = this.files[0].size;
fileName = this.value;
this.files = [];

对我来说，这些行的功能如下：

执行数据读取；
分配一些值
将this.files设为空数组

执行此操作后，该功能现在似乎可以在 Chrome 中正常运行。

我现在的问题更像是：为什么它以前在任何浏览器中都能正常工作？看来清空数组，然后尝试使用数组是注定的。

而第二个谜团是为什么它能工作几个月？我已验证此特定代码在那段时间没有更改。

Answer 2

我有类似的问题。删除行 this.files = []; 接缝以修复错误，并且由于 reader.readAsDataURL(this.files[0]); 已经被调用，我认为它不会对文件上传造成任何损害。我认为发生错误是因为它需要一个 FileList 类型的值但不匹配 []

Chrome 上传图片不再有效；其他浏览器没问题

Chrome uploading image no longer works; other browsers are fine

javascript

jquery

google-chrome

html-input