267

inputタイプfile要素のHTMLに対してユーザーが行ったすべてのファイル選択を検出する機会はありますか？

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

4

9 に答える 9

357

各イベントでinputtoの値を設定します。これにより、の値がリセットされ、同じパスが選択されている場合でもイベントがトリガーされます。nullonclickinputonchange

var input = document.getElementsByTagName('input')[0];

input.onclick = function () {
  this.value = null;
};
  
input.onchange = function () {
  console.log(this.value);
};
<input type="file" value="C:\fakepath">

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

于 2012-08-24T04:04:39.267 に答える
34

ユーザーがフィールドをクリックするたびに、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 = ''
}
于 2019-02-11T14:45:32.857 に答える
27 
<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;

これがフィドルです

于 2014-09-20T12:52:48.233 に答える
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>

'change'にイベントリスナーを追加しますが、テストしたところ、キャンセルした場合ではなく、同じファイルを選択した場合でもトリガーされます。

于 2012-08-24T03:04:20.200 に答える
7 
handleChange({target}) {
    const files = target.files
    target.value = ''
}
于 2020-03-27T13:23:34.110 に答える
1

入力の0番目のインデックスの値をクリアすることは私のために働きました。以下のコードを試してみてください。これが機能することを願っています（AngularJs）。

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };
于 2020-06-19T09:21:05.580 に答える
1 
<input #myInput type="file" id="imgFile" (click)="$event.target.value=null"
       (change)="detectUploadedImage($event)" accept="image/*" />
于 2021-07-22T06:42:44.247 に答える
0

ファイルが正常にロードされた後、やりたいことを何でもします。ファイル処理の完了直後に、ファイル制御の値を空白の文字列に設定します。これにより、ファイル名が変更されたかどうかに関係なく、.change（）が常に呼び出されます。たとえば、あなたはこのことをすることができ、魅力のように私のために働いた

   $('#myFile').change(function () {
       LoadFile("myFile");//function to do processing of file.
       $('#myFile').val('');// set the value to empty of myfile control.
    });
于 2018-08-07T13:04:33.937 に答える
0

Angularを使用している場合は、双方向バインディングを使用するとうまくいきました。

これが私のHMTLです

<input type="file" #upload name="upload" [(ngModel)]="inputValue"(change)='fileEvent($event)'/>

とTS..

  @ViewChild('upload') uploadBtn: HTMLElement;

  fileEvent(e: any){
    
   //file upload part... 

    this.inputValue = "";
  }
于 2021-04-26T09:14:51.777 に答える