アップロード用の標準ファイル入力で作業しています。ユーザーが「キャンセル」ボタンをクリック/クリックすると、イベントに関数を追加する方法を探していますファイルの選択ダイアログが表示されます（またはそこからエスケープします）。入力タイプ= "ファイル"のイベントをキャンセルする
すべてのブラウザとプラットフォームで一貫して機能するイベントは見つかりません。
私はこの質問の回答を読んだ：Capturing cancel event on input type=fileしかし、変更イベントはほとんどのブラウザではファイル選択ダイアログから取り消されないので動作しない。
私は純粋なjsソリューションを探していますが、jqueryソリューションも開いています。
誰でもこの問題を解決できますか？
ファイル選択ダイアログボックスで[キャンセル]が選択されていることを検出する方法がないことがわかりました。 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.");
}
入力からの値。
これはFirefoxでは動作しません。 :(以前にファイルが選択されていない場合は、「ブラウズ」ボタンをクリックするとすぐに、「疑わしいファイルが選択されました」、「疑似キャンセルボタンがクリックされました」というメッセージが表示されます。ファイルが以前に選択されている場合は、「参照」をクリックするとすぐに、ダイアログにまだ入っていても前のファイルを選択したことが記録されます – Noitidart
FFで書きました。あなたのテストコードのフィドルですか？ – Twisty
あなたの速い返信のためにありがとうございました、私はちょうど私が何か別々の書き込みdidntの上のフィドルを使用しました。 – Noitidart
私はinput type = "file"要素のキャンセルボタンをクリックして何もしないようにしたいという問題がありました。何かが選択されてオープンボタンをクリックした場合、私の機能が何かをしたかったのです。この例はメソッドを示しているだけで、私はそれが開いた後に私が行ったことを取り除いた。あなたがキャンセルをクリックしたときにファイル名がダイアログから戻って来ないことがわかるように、私は警告を出しました。 ここに私が使用する方法がありますが、それは簡単ですが動作します。 （.change `以来
function openFileOnClick(){
document.getElementById("fileSelector").value = "";
document.getElementById("fileSelector").files.length = 0;
document.getElementById("fileSelector").click();
if(document.getElementById("fileSelector").files.length >= 1){
alert(document.getElementById("fileSelector").value);
//Do something
}
else{
alert(document.getElementById("fileSelector").value);
//Cancel button has been called.
}
}<html>
<head>
</head>
<body>
<input type="file" id="fileSelector" name="fileSelector" value="" style="display:none;" />
<input type="button" value="Open File" name="openFile" onclick="openFileOnClick();" />
</body>
</html>コードスニペットが何をしているのか、それがなぜ機能するのかを詳しく説明できますか？ – danjuggler
私はinput type = "file"要素のキャンセルボタンをクリックして何もしないようにしたいという問題がありました。何かが選択されてオープンボタンをクリックした場合、私の機能が何かをしたかったのです。上の例はメソッドを示していますが、私はそれが開いた後に私が行ったことを取り除きました。私は警報だけを入れて、ダイアログからファイル名が戻ってこないことが分かりました。 – DJones
このようなものについては、私たちが行動 – GWR
）'すべてのブラウザで実行されていない、と呼ばれているイベントを探してください。あなたが探しているブラウザは具体的に動作していますか？ – Twisty
このhttps://jsfiddle.net/Twisty/j18td9cs/でのいくつかのテストは、FFで、 'Cancel'はブラウザダイアログボックスの要素なので、ファイルが選択されているかどうかのみ確認できます。ファイルを選択して2回目のブラウズを行ってキャンセルを押すと、ファイルの値が保持されていることに気付きました。ページに独自のキャンセルボタンを作成できました。 'confirm（）'や 'prompt（）'のように、何かが更新されたかどうかを確認しようとしました。 – Twisty