選擇文件（表單提交）后無法單擊取消按鈕
[英]cancel button cannot be clicked after file select (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：
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變量向該方法發出信號以使其停止。 但是，就像我在評論中說的那樣，永遠不要通過單擊我的按鈕來調用此方法。 取消按鈕甚至不像單擊一樣設置動畫。
下面提到了promise 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'));
});
3 個解決方案
解決方案1
1 2016-04-26 15:58:58
而且由於事件循環在javascript瀏覽器中的工作原理，幾乎可以肯定它永遠不會起作用。
解決方案2
0 2016-04-26 16:01:51
這可能是因為文件讀取器耗盡了所有線程的時間來處理要調用的函數-您看到的是，JavaScript僅具有一個線程，因此一次只能處理一件事，而這一件事就是文件閱讀器！
編輯
然而，你可以使用一個承諾（如解釋在這里 ）異步運行文件讀取器和取消的承諾。
我沒有多少使用諾言的經驗，所以我不能提供太多建議，但是值得一看。
解決方案3
0 2016-04-26 16:06:05
您的頁面將一直處於阻塞狀態，直到完成該任務（上傳文件）為止。 由於具有阻止功能，因此您的用戶將無法執行任何操作，直到該任務結束。
您的替代方法是使用非阻塞io
我怎樣才能檢測到取消按鈕已被點擊<input type="file"> Select 文件對話框？
[英]How can I detect that the Cancel Button has been clicked on a <input type="file" /> Select File Dialog?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.