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

Question

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

在浏览 Chrome 的更新日志时，我注意到以下几点:

native 文件系统 API 开始具有附加功能的新源试验

我认为这可能是我出现问题的原因，但也许不是。这是代码:

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

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

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

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

1. 在 iframe 源中将 javascript:; 更改为 javasript:false;
2. 将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);