Chrome 上传图片不再起作用；其他浏览器没问题

Posted 2023-03-05

【中文标题】Chrome 上传图片不再起作用；其他浏览器没问题

【英文标题】：Chrome uploading image no longer works; other browsers are fine

【发布时间】：2016-07-13 10:58:52

【问题描述】：

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

Chrome 生成的错误信息如下：

未捕获的类型错误：无法在“htmlInputElement”上设置“文件”属性：提供的值不是“文件列表”类型。

出现问题的代码部分如下：

    $(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();”行会引发另一个错误。该行的错误是“未定义文件名”。

如上所述，此功能在 Chrome 中运行了几个月，并在 Firefox、Safari 和 Internet Explorer 中继续正常运行。

【问题讨论】：

你使用的代码是？

类型的值是FileList吗？

“我们最近实现了”并没有告诉我们太多关于如何...引发错误的代码在哪里？

我遇到了同样的问题：“无法在 'HTMLInputElement' 上设置 'files' 属性：提供的值不是 'FileList' 类型。

【参考方案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 中正常工作。

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

第二个谜团是为什么它可以工作几个月？我已验证此特定代码在此期间没有更改。

【参考方案2】：

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

【讨论】：

正如我在回答中所说，在使用其值之前清除数组实际上是问题所在。所以我们同意。开发人员说他清除了它，因为这样可以防止该值稍后以不需要的方式显示在屏幕上。