ファイル選択（フォーム提出）後にキャンセルボタンをクリックすることはできません

ファイルのアップロードボタンと、ロード状態を表示するモーダルポップアップとキャンセルボタンがある非常に単純な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')); 
});

出典

2016-04-26 owen gerig