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

Question

I have a very simple html page which has a file upload button as well as a modal popup to show loading status and a cancel button. 我有一个非常简单的html页面，该页面具有一个文件上传按钮以及一个用于显示加载状态的模式弹出窗口和一个取消按钮。 My problem is that the cancel button seems to be blocked while it's processing the file (making it useless). 我的问题是，在处理文件（使它无用）时，取消按钮似乎被阻止了。 How can I have a button which will cancel the form submission. 我如何有一个按钮可以取消表单提交。

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: JS：

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

The logSelected() method is quite lengthy and I omitted it from the above code mostly to eliminate clutter. logSelected()方法相当冗长，我在上面的代码中省略了它，主要是为了消除混乱。 That method uses FileReader to read the selected file than create a table from the data. 该方法使用FileReader读取所选文件，而不是根据数据创建表。 However I do signal to this method to stop via the operationAborted variable. 但是，我确实通过operationAborted变量向该方法发出信号以使其停止。 however like i said in the comments, this method is never called by clicking my button. 但是，就像我在评论中说的那样，永远不要通过单击我的按钮来调用此方法。 The cancel button doesnt even animate like it was clicked. 取消按钮甚至不像单击一样设置动画。

The promise api was mentioned below, here is my attempt at it. 下面提到了promise API，这是我的尝试。 Although it works it did not fix the issue of the cancel button not clickable due to the main/only thread being used. 尽管它起作用了，但是它不能解决由于使用主/唯一线程而导致取消按钮不可单击的问题。

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

而且由于事件循环在javascript浏览器中的工作原理，几乎可以肯定它永远不会起作用。

Answer 2

This could be because the file reader is using up all of the thread leaving to time to process the function to be called - you see, JavaScript only has one thread & thus can only handle one thing at a time, & this one thing is the file reader! 这可能是因为文件读取器耗尽了所有线程的时间来处理要调用的函数-您看到的是，JavaScript仅具有一个线程，因此一次只能处理一件事，而这一件事就是文件阅读器！

edit 编辑
However you could use a promise (as explained here ) to run the file reader asynchronously & cancel the promise. 然而，你可以使用一个承诺（如解释在这里）异步运行文件读取器和取消的承诺。
I don;t have much experience with using promises so I can't give much advice, but it is worth a look. 我没有多少使用诺言的经验，所以我不能提供太多建议，但是值得一看。

Answer 3

You page remain blocked until this thead (uploading the file) its done. 您的页面将一直处于阻塞状态，直到完成该任务（上传文件）为止。 Since its a blocking function, your user won't be able to do anything until this task end. 由于具有阻止功能，因此您的用户将无法执行任何操作，直到该任务结束。

Your alternative is to use non-block io 您的替代方法是使用非阻塞io

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

问题描述

3 个解决方案

解决方案1
1 2016-04-26 15:58:58

解决方案2
0 2016-04-26 16:01:51

解决方案3
0 2016-04-26 16:06:05

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

问题描述

3 个解决方案

解决方案1 1 2016-04-26 15:58:58

解决方案2 0 2016-04-26 16:01:51

解决方案3 0 2016-04-26 16:06:05

解决方案1
1 2016-04-26 15:58:58

解决方案2
0 2016-04-26 16:01:51

解决方案3
0 2016-04-26 16:06:05