web-dev-qa-db-ja.com

入力type = "file"でイベントをキャンセルする

アップロード用の標準ファイル入力で作業しています。ユーザーがファイル選択ダイアログで「キャンセル」ボタンをクリックまたはヒットしたときにイベントに関数をアタッチする方法を探しています。

すべてのブラウザとプラットフォームで一貫して機能するイベントを見つけることができません。

私はこの質問への回答を読みました： 入力タイプ=ファイルでキャンセルイベントをキャプチャする ダイアログ。

私は純粋なjsソリューションを探していますが、jqueryソリューションにもオープンです。

誰でもこの問題をうまく解決できますか？

javascriptjqueryfile-upload
15
GWR

少し調べてみると、「ファイル選択」ダイアログウィンドウで「キャンセル」が選択されていることを検出する方法はありません。 onchangeまたはonblurを使用して、ファイルが選択されているかどうか、または入力valueに何かが追加されているかどうかを確認できます。

これは次のようになります。 https://jsfiddle.net/Twisty/j18td9cs/

[〜＃〜] html [〜＃〜]

<form>
  Select File:
  <input type="file" name="test1" id="testFile" />
  <button type="reset" id="pseudoCancel">
    Cancel
  </button>
</form>

JavaScript

var inputElement = document.getElementById("testFile");
var cancelButton = document.getElementById("pseudoCancel");
var numFiles = 0;

inputElement.onclick = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "clicked.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    cancelButton.onclick();
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onchange = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}

inputElement.onblur = function(event) {
  var target = event.target || event.srcElement;
  console.log(target, "changed.");
  console.log(event);
  if (target.value.length == 0) {
    console.log("Suspect Cancel was hit, no files selected.");
    if (numFiles == target.files.length) {
      cancelButton.onclick();
    }
  } else {
    console.log("File selected: ", target.value);
    numFiles = target.files.length;
  }
}


cancelButton.onclick = function(event) {
  console.log("Pseudo Cancel button clicked.");
}

フォームをリセットするか、入力から値をクリアする独自のキャンセルまたはリセットボタンを作成することをお勧めします。

12
Twisty