文件上传不再适用于 Chrome答案

【问题标题】：File upload no longer works in Chrome文件上传不再适用于 Chrome
【发布时间】：2020-06-04 23:50:14
【问题描述】：

我有一个使用相同文件上传代码大约 8 年的网络应用程序。它旨在在表单数据可用于管理文件上传之前在浏览器中工作。架构是 MVC 和 jQuery。就在最近它停止在 Chrome 中工作。该代码使用带有文件输入的隐藏表单来发布到文件上传控制器。表单响应被定向到隐藏的 iframe，加载事件用于响应响应。

代码sn-p

var iframe = document.createElement('iframe');
iframe.setAttribute('name', "iframe");
iframe.setAttribute('id', "iframe");
//$("#iframe_" + id).load(function () { iframeLoad() });
iframe.setAttribute('src', 'javascript:false');
iframe.style.display = 'none';
document.body.appendChild(iframe);
$("#iframe_" + id).load(function () { iframeLoad() });  
// create the form
var form = document.createElement('form');
form.setAttribute('id', "fileUploadForm");
form.setAttribute('method', 'post');
form.setAttribute('enctype', 'multipart/form-data');
form.setAttribute('action', 'the file upload controller path');
// output the response to the iframe
form.setAttribute('target', "iframe");
form.style.display = 'none';
document.body.appendChild(form);
form.appendChild(input);
form.submit();
... and do clean up

... and a function to listen for the reponse from the controller
function iframeLoad() { ...  }

如果事件侦听器是在将 iframe 附加到 DOM 之后创建的，那么这在 IE Edge Firefox 中有效，但在 Chrome 中，表单永远不会提交，并且加载事件会在没有响应的情况下触发。

如果事件监听器是在将 iframe 附加到 DOM 之后创建的，那么 Chrome 将提交表单，但加载事件永远不会触发。

【问题讨论】：

标签： jquery asp.net-mvc

【解决方案1】：

我与另一位开发人员对此进行了调查，我们得出的结论是，这种传统的文件上传方法在 Chrome 中不再适用。所以我添加了代码来检查它并为现代浏览器使用不同的方法。

if (typeof input.files !== "undefined") {
    if (input.files.length > 0) {
        var formData = new FormData();
        formData.append('file', input.files[0], name);
        $.ajax({
            type: "POST",
            url: 'path to controller',
            contentType: false,
            processData: false,
            data: formData,
            timeout: 45000,
            success: function (response) {
            ... etc.

【讨论】：