使用目標屬性將文件上傳到本地 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" ，它是一個本地 iframe 附加到文檔body中：

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

這是uploadFile(this.form) function 的樣子：

_.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();
    });
};

我在調試它時有一個 go 並意識到response完全是空的。 然后我意識到我並不感到驚訝，因為請求已被取消：

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

我一直在搜索有關target屬性可能降級或使用 iframe 發送表單的方式的信息，但無濟於事。 如果有人經歷過類似的事情，或者至少可以告訴我它不起作用的原因，也許我可以找到一種解決方法。

到目前為止我嘗試過的事情：

1. 更改javascript:; 到javasript:false; 在 iframe 源
2. 更改javascript:; 到#在 iframe 源

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

我也遇到了這個問題。 查了一陣子，替換src="javascript:;"就可以輕松解決在文件kcfinder/js/060.toolbar.js中使用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 在最新版本的 Chrome 版本 83.0.4103.61（官方構建）（64 位）中無法正常工作