同じファイルを選択してもHTML入力ファイル選択イベントが発生しない


204

inputtype file要素のHTMLに対してユーザーが行ったすべてのファイル選択を検出する可能性はありますか?

これは以前に何度も尋ねられましたが、通常提案された onchange、ユーザーが同じファイルを再度選択した場合、イベントは発生しません。


7
次に、ユーザーが[キャンセル]をクリックした場合も、コードを実行する必要がありますか?[キャンセル]を押しても何も起こらないことを期待しています。ほとんどのユーザーは、同じファイルを再度選択すると、[キャンセル]と同じ効果が得られることを期待しています。これが可能かどうかはわかりませんが、とにかくこのデザインを再検討することをお勧めします。
KRyan 2012

1
キャンセル時には、発砲したり、検出できないようにする必要があります。これは、UIの警告を削除することを意味します。ファイルが選択された後に何らかのアクションが呼び出された場合、ユーザーは通常、ファイルを再度選択した場合にアクションが繰り返されることを期待します。
dronus 2012

inputファイルで何かを行った後でs値を ''に設定すると、この動作が発生する可能性があります。しかし、それは目に見えるファイル名も削除します。ただし、ファイルが実際に処理され、そのアクションの結果が別の場所に表示される可能性があるため、問題はありません。
dronus 2012

PlzはQueについて説明します
Champ

1
私が欲しいのは、デスクトップアプリケーションが持っている古い学校の行動をシミュレートすることだけです。デスクトップアプリケーションで同じファイルを再度「開く」と、通常は再ロードされます。または、ファイルに対して何らかのアクション(たとえば、別の形式に変換するなど)が実行されると、このアクションが再度実行されます。これは、デスクトップユーザーもWebアプリに期待することですが、file入力onchangeイベントは似ていません。
dronus 2012

回答:


279

値を設定inputnull、それぞれのonclickイベント。これにより、inputの値がリセットされ、onchange同じパスが選択されている場合でもイベントがトリガーされます。

input.onclick = function () {
    this.value = null;
};

input.onchange = function () {
    alert(this.value);
};​

これがデモです。

注:ファイルの先頭に「C:\ fakepath \」が付いているのは正常です。これは、JavaScriptがファイルの絶対パスを認識できないようにするセキュリティ機能です。ブラウザはまだ内部的にそれを知っています。


1
デモを試してみましたが、(Chrome 21を使用して) `C:\ fakepath`と、選択したファイル名(パスを除く)を取得し続けました。ただし、同じファイルを選択するたびにアラートが表示されます。
Jasper de Vries、2012

1
@JasperdeVriesこれは、JavaScriptがファイルの絶対パスを認識できないようにするセキュリティ機能です。ブラウザは内部でパスを認識しています。
ブライアン・ウスタス

1
余談ですが、<input type = "file">に許可されている唯一の値はnullです。したがって、未定義に設定して例外を取得しようとしている場合は、それが理由です。
Noel Abrahams

5
小さな変更を加えない限り、IE11ではうまく機能しません:demo

21
それは置く方が良いでしょうthis.value = nullの終わりにonchange(キーボードを使用して)それをクリックすることなく、それがアクティブな入力要素に可能だからです。input.files後で参照する必要がある場合は保存できます。
Halcyon 2014年

24
<form enctype='multipart/form-data'>
    <input onchange="alert(this.value); this.value=null; return false;" type='file'>
    <br>
    <input type='submit' value='Upload'>
</form>

this.value=null; Chromeでのみ必要です。Firefoxは return false;

ここにFIDDLEがあります


2
シンプルで効果的な最新のIEとChromeでテストされただけで、魅力のように機能します。共有していただきありがとうございます
Atul Chaudhary 2015年

8

この記事では、「選択のためのフォーム入力の使用」というタイトルの下で

http://www.html5rocks.com/en/tutorials/file/dndfiles/

<input type="file" id="files" name="files[]" multiple />

<script>
function handleFileSelect(evt) {

    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
     // Code to execute for every file selected
    }
    // Code to execute after that

}

document.getElementById('files').addEventListener('change', 
                                                  handleFileSelect, 
                                                  false);
</script>

イベントリスナーを「変更」に追加しますが、私はそれをテストしました。キャンセルした場合ではなく、同じファイルを選択した場合でもトリガーされます。


この場合の「変更」の潜在的にあいまいな意味を考慮して、これを複数のブラウザーで試しましたか?Webで試したものを指定することもできますが、ブラウザがこれらのことについて常に一致しているとは限りません。
Thor84no 2012

2
テストに使用する環境は何ですか?Chromeでの私の経験は私が質問で述べたものでした、changeイベントはファイル名の変更でのみ発生します。
dronus 2012

7

onClickイベントを使用して、ユーザーがフィールドをクリックするたびに、ターゲット入力の値をクリアします。これにより、同じファイルに対してonChangeイベントが確実にトリガーされます。私のために働いた:)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

TypeScriptの使用

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

解決策をありがとう。
Deepak Tekc​​handani

1

ファイルが正常にロードされた後、何をしたいかを行います。ファイル処理の完了直後に、ファイルコントロールの値を空の文字列に設定します。したがって、ファイル名が変更されたかどうかにかかわらず、.change()は常に呼び出されます。たとえば、あなたはこのことをすることができ、魅力のように私のために働いた

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });

1
handleChange({target}) {
    const files = target.files
    target.value = ''
}

1
ngCourseさん、こんにちは。コードのみの回答は問題を解決する可能性がありますが、それをどのように解決するかを説明すると、はるかに役立ちます。コミュニティはあなたの答えを完全に理解するために理論とコードの両方を必要とします。
RBT

このコードは問題を解決する可能性がありますが、これが問題を解決する方法と理由の説明含めると、投稿の品質が向上し、おそらく投票数が増えることになります。あなたが今尋ねている人だけでなく、あなたが将来の読者のための質問に答えていることを忘れないでください。回答を編集して説明を追加し、適用される制限と前提を示してください。口コミから
ダブルビープ音

1

入力の0番目のインデックスの値をクリアするとうまくいきました。以下のコードを試してください。これが機能することを願っています(AngularJs)。

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.