Chrome 83:无法上传文件

Question

我在83版上更新了Chrome，我的一些使用Ajax上传组件(下面更多信息)的表单不起作用。我读过新版本(https://developers.google.com/web/updates/2020/05/nic83)的问题，但在表单、iframes、文件、ajax或贴子上找不到任何相关内容。

我会试着在小提琴上贴个样本，但我想知道是否有人知道这件事。

另一方面，在其他表单上，我有一个多文件、拖放上传器(dropzone.js)，它工作得很好，但是转换起来不容易，我需要一个快速的解决方案。

一个虚拟示例(我没有任何沙箱来测试上传)：https://jsfiddle.net/drvespa/7ue8k94r/3/

Chrome 83上的

• (我也尝试过金丝雀85版本)：它不会抛出错误，因为提交的表单没有被AjaxUpload组件捕获。在提交完成之前调用回调，响应为空。火狐上的
• ：它抛出一个错误，因为AjaxUpload组件试图反序列化虚拟上传页面的404。

我把图书馆贴在https://filebin.net/8sgsmq7sh14m0qen上

/**
* Ajax upload
* Project page - http://valums.com/ajax-upload/
* Copyright (c) 2008 Andris Valums, http://valums.com
* Licensed under the MIT license (http://valums.com/mit-license/)
* Version 3.6 (26.06.2009)
*/

Answer 1

问题是，库正在创建一个带有src属性的load事件，并在它创建之后立即侦听该iframe的load事件。

/**
* Creates iframe with unique name
*/
_createIframe: function () {
    // unique name
    // We cannot use getTime, because it sometimes return
    // same value in safari :(
    var id = getUID();

    // Remove ie6 "This page contains both secure and nonsecure items" prompt 

    var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');
    iframe.id = id;
    iframe.style.display = 'none';
    d.body.appendChild(iframe);
    return iframe;
},

然后在submit方法中

            var iframe = this._createIframe();

            // some synchronous operations

            addEvent(iframe, 'load', function (e) { // ...

因为这个iframe有一个src属性，Chrome将启动它的加载，而且由于它的src是一个假的url，这个操作实际上是同步解析的，这意味着加载事件已经被设置为在下一个事件循环迭代时触发。

​

const frame = document.createElement('iframe');
frame.src = 'javascript:return false';
document.body.append(frame);
frame.addEventListener('load', (evt) => console.log('loaded', frame.src) );

setTimeout( () => frame.src = "about:blank", 0 );

// Results in Chrome:
// loaded javascript:return false
// loaded about:blank

// Results in Firefox:
// loaded about:blank

​

因此，这个库接收到的一个load事件是一个空文档的初始加载事件，而不是真正的请求之一。

要解决这个问题，您只需要从库代码中删除这个src="javascript:false;"：https://jsfiddle.net/9phxmqjw/

Answer 2

我只是将srcdoc属性设置为iframe等于AjaxUpload组件中的url。

iframe.setAttribute('srcdoc'，this._settings.action)；

它解决了我的问题。

函数到文件AjaxUpload.js中：

        _createIframe: function(){
            var id = getUID();            

            var iframe = toElement('<iframe src="javascript:false;" name="' + id + '" />');        
            iframe.setAttribute('id', id);
            iframe.setAttribute('srcdoc', this._settings.action);

            iframe.style.display = 'none';
            document.body.appendChild(iframe);

            return iframe;
        }

Answer 3

这个答案帮助我修补我们的Atmail副本，所以上传附件在Chrome 83中再次工作-谢谢！

上面的setAttribute行应该插入到'_createIframe‘函数中的AjaxUpload.js文件中。我把它放在setAttribute('id'，id)调用下面，这就完成了这个任务:)