Chrome 83:无法上传文件

问题描述

我已经在版本83上更新了Chrome，但是我使用"Ajax上传"组件的某些表单(下面有更多信息)无法正常工作.我已阅读了新版本( https://developers.google的问题. com/web/updates/2020/05/nic83 )，但找不到与表单，iframe，文件，ajax或帖子相关的任何内容.

I've update Chrome on version 83, and some of my forms that use an "Ajax upload" component (more info below) aren't working. I've read the issues of the new version (https://developers.google.com/web/updates/2020/05/nic83) but I can't find anything related on forms, iframes, files, ajax or posts.

我将尝试在Fiddler上发布示例，但我想知道是否有人对此有所了解.

I'll try to post a sample on fiddler, but I want to know if somebody knows anything about it.

通过其他方式，在其他表单上，我有一个多文件，拖放式上载器(dropzone.js)，它可以正常工作，但转换起来并不容易，我需要一个快速的解决方案.

By other way, on other forms I've a multifile, drag&drop uploader (dropzone.js) and it's working fine, but it isn't easy to convert and I need a fast solution.

一个虚拟样本(我没有任何沙箱可测试上传): https://jsfiddle .net/drvespa/7ue8k94r/3/

A dummy sample (I don't have any sandbox to test upload): https://jsfiddle.net/drvespa/7ue8k94r/3/

• 在Chrome 83上(我也在Canary 85版本上尝试过):它不会引发任何错误，因为AjaxUpload组件无法捕获表单的提交.提交完成之前将调用回调，并且响应为空.
• 在Firefox上:引发错误，原因是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)
*/

推荐答案

问题是库正在创建具有src属性的< iframe>，并监听该iframe的load事件.之后.

The problem is that the library is creating an <iframe>, with an src attribute, and listens for the load event of that iframe right after it did.

/**
* 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，因此该操作实际上是同步解析的，这意味着load事件已设置为在下一次触发事件循环迭代.

Since this iframe has an src attribute, Chrome will start its loading, and since its src is a fake url, this operation actually is resolved synchronously, meaning that the load event is already set to fire at the next event-loop iteration.

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事件是初始加载事件，它是一个空文档，而不是真正的请求中的一个.

So the one load event this library is receiving is that initial load event, of an empty document, and not the one of the real request.

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

To fix that, all you need is to remove this src="javascript:false;" from the library code: https://jsfiddle.net/9phxmqjw/

这篇关于Chrome 83:无法上传文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！