Question

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

Chrome正在生成的错误消息如下：

未捕获的TypeError：无法在'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未定义”。

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

Answer 1

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

所以在预感中，我重新安排了一些线路的顺序。上述代码中的行如下：

 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上传图片不再有效;其他浏览器都很好

2 个答案: