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

Question

我正在使用 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"，它是文档 body 前面的本地 iframe：

<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 完全是空的。然后我意识到我并不感到惊讶，因为请求已被取消：

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

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

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

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

Answer 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);

Answer 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

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

Uploading files to local iframe using target attribute not working in newest Chrome

html

javascript

iframe

kcfinder