Question

我有一个非常简单的html页面，它有一个文件上传按钮以及一个显示加载状态和取消按钮的模态弹出窗口。我的问题是取消按钮似乎在处理文件时被阻止（使其无用）。我怎么能有一个取消表格提交的按钮。

HTML：

<body>
    <div id="myModal" class="modal">
        <div class="modal-content">
            <p>Processing File.</p>
            <div class="loader-inner pacman"><div></div><div></div><div></div><div></div><div></div></div>
            <div id="progressbar" ></div>
            <input type = "button" name="cancel" value = "cancel" onclick = "cancelRead()" />
        </div>
    </div>

    <div>
        <input type="file" id="logSelector" name="log" title="Select a log file" onchange="logSelected();"/>

JS：

function cancelRead() {
    console.log("cancelRead");  //never see this message even though the button is clicked
    fileReader.abort();
    operationAborted = true;
    document.execCommand('Stop');
}

logSelected()方法非常冗长，我从上面的代码中省略了它，主要是为了消除混乱。该方法使用FileReader来读取所选文件，而不是从数据创建表。但是，我确实通过operationAborted变量向此方法发出信号。但就像我在评论中所说的那样，单击我的按钮永远不会调用此方法。取消按钮甚至不像点击它一样动画。

承诺api在下面提到，这是我的尝试。虽然它有效但它没有解决由于使用主/唯一线程而导致取消按钮无法点击的问题。

var promise = $.Deferred(function (dfd) {
    FILE_READER.onload = function (event) {
        var contents = event.target.result;
        dfd.resolve(contents);
    };
    FILE_READER.readAsText(file);
}).promise();
$.when(promise).then(function (contents) {
    processFile(contents.split('\n'));
});

Answer 1

由于event loop在javascript浏览器中的工作原理，它几乎可以肯定它永远不会起作用。

Answer 2

这可能是因为文件阅读器正在耗尽所有线程的时间来处理要调用的函数 - 你看，JavaScript只有一个线程＆amp;因此，一次只能处理一件事，＆amp;这一件事是文件阅读器！

<小时/> 修改
但是，你可以使用一个promise（如here所解释的那样）来异步运行文件阅读器＆amp;取消承诺。
我没有多少使用承诺的经验，所以我不能给出很多建议，但值得一看。

Answer 3

您的页面一直被阻止，直到这个thead（上传文件）完成。由于它具有阻止功能，因此在此任务结束之前，您的用户将无法执行任何操作。

您的替代方法是使用non-block io

文件选择（表单提交）后无法单击取消按钮

3 个答案: