使用目标属性将文件上传到本地 iframe 在最新的 Chrome 中不起作用答案

【问题标题】：Uploading files to local iframe using target attribute not working in newest Chrome使用目标属性将文件上传到本地 iframe 在最新的 Chrome 中不起作用
【发布时间】：2020-05-25 21:37:39
【问题描述】：

我正在使用 kcFinder 2.54 通过 CKEditor 将文件上传到我的站点之一。我知道脚本的版本很旧，但直到最近它们都运行良好。

在浏览 Chrome 的更新日志时，我注意到以下内容：

The native file system API starts a new origin trial with added functionality

我认为这可能是我的问题的原因，但也许不是。代码如下：

当 kcFinder 初始化时，它会创建一个简单的表单：

<form enctype="multipart/form-data" method="post" target="uploadResponse" action="browse.php?type=files&amp;lng=pl&amp;opener=ckeditor&amp;act=upload">
    <input type="file" name="upload[]" onchange="_.uploadFile(this.form)" style="height:30px" multiple="multiple">
    <input type="hidden" name="dir" value="">
</form>

注意 target="uploadResponse"，它是一个本地 iframe，位于文档的 body 之前：

<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>

这是uploadFile(this.form) 函数的样子：

_.uploadFile = function(form) {
    if (!_.dirWritable) {
        _.alert(_.label("Cannot write to upload folder."));
        $('#upload').detach();
        _.initUploadButton();
        return;
    }
    form.elements[1].value = _.dir;
    $('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);
    $('#loading').html(_.label("Uploading file...")).show();
    form.submit();
    $('#uploadResponse').load(function() {
        var response = $(this).contents().find('body').text();
        $('#loading').hide();
        response = response.split("\n");

        var selected = [], errors = [];
        $.each(response, function(i, row) {
            if (row.substr(0, 1) == "/")
                selected[selected.length] = row.substr(1, row.length - 1);
            else
                errors[errors.length] = row;
        });
        if (errors.length) {
            errors = errors.join("\n");
            if (errors.replace(/^\s+/g, "").replace(/\s+$/g, "").length)
                _.alert(errors);
        }
        if (!selected.length)
            selected = null;
        _.refresh(selected);
        $('#upload').detach();
        setTimeout(function() {
            $('#uploadResponse').detach();
        }, 1);
        _.initUploadButton();
    });
};

我试了一下，发现response 完全是空的。然后我意识到，由于请求已被取消，我并不感到惊讶：

我唯一注意到的是这个标题Upgrade-Insecure-Requests: 1，但不确定这是否重要，因为 iframe 完全是本地的。

我一直在搜索有关target 属性可能降级或使用 iframe 发送表单的工作方式的信息，但无济于事。如果有人遇到过类似的事情，或者至少可以告诉我它不起作用的原因，也许我可以找到一个解决方法。

到目前为止我尝试过的事情：

在 iframe 源中将 javascript:; 更改为 javasript:false;
在 iframe 源中将 javascript:; 更改为 #

【问题讨论】：

标签： javascript html iframe kcfinder

【解决方案1】：

我遇到了同样的问题。我通过在下一个刻度中调用form.submit 解决了它：

// [...]

$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);
$('#loading').html(_.label("Uploading file...")).show();

setTimeout(function() {
  $('#uploadResponse').load(function() {
      // [...]
  });
  form.submit();
}, 1);

【讨论】：

我仍然不知道 Chrome 发生了什么，但您的解决方案适用于较新版本的 kcfinder（我有 2.54）。更新了 kcfinder 并应用了您的解决方案并且它有效。你不知道你救了我多少头痛。谢谢一群朋友！

【解决方案2】：

我也遇到了这个问题。经过一段时间的研究，可以通过将文件kcfinder/js/060.toolbar.js中的src="javascript:;"替换为src="about:blank"轻松解决：

$('<iframe id="uploadResponse" name="uploadResponse" src="javascript:;"></iframe>').prependTo(document.body);

到

$('<iframe id="uploadResponse" name="uploadResponse" src="about:blank"></iframe>').prependTo(document.body);

参考： https://github.com/jquery-form/form/pull/572

$.AjaxFileUpload is not woking in latest version of Chrome Version 83.0.4103.61 (Official Build) (64-bit)

【讨论】：