ファイル選択でイベントを発生させる方法

私はフォームを持っています

<form  onSubmit="return disableForm(this);" action="upload.php" method="post" name="f" id="wizecho" enctype="multipart/form-data">
    <input type="file" name="file" />
    <button onClick="return disableForm(this),ajaxUpload(this.form,'wizecho_upload.php', '&lt;br&gt;Uploading image please wait.....&lt;br&gt;'); return false;">
        Upload Image
    </button>
</form>

画像をアップロードすることです。

ここで、ボタンをクリックして画像をアップロードする必要があり、onClickイベントを使用する必要があります。アップロードボタンを削除し、入力でファイルが選択されるとすぐに、イベントを発生させます。それ、どうやったら出来るの？？

ファイル入力の変更イベントを使用します。

$("#file").change(function(){
         //submit the form here
 });

入力フィールドでonchangeイベントをサブスクライブできます。

<input type="file" id="file" name="file" />

その後：

document.getElementById('file').onchange = function() {
    // fire the upload here
};

これは古い質問であり、@クリストファー・トーマスの上記の承認回答のコメントでの懸念に対処する新しい回答が必要です。ページから移動してファイルをもう一度選択しない場合は、クリックするかタッチスタート（モバイルの場合）を実行するときに値をクリアする必要があります。以下は、ページから移動してjqueryを使用する場合でも機能します。

//the HTML
<input type="file" id="file" name="file" />



//the JavaScript

/*resets the value to address navigating away from the page 
and choosing to upload the same file */ 

$('#file').on('click touchstart' , function(){
    $(this).val('');
});


//Trigger now when you have selected any file 
$("#file").change(function(e) {
    //do whatever you want here
});

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

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

同じファイルを複数回アップロードし、@ changeイベントがトリガーされない場合の問題を解決する、vueユーザー向けのソリューション：

 <input
      ref="fileInput"
      type="file"
      @click="onClick"
    />
  methods: {
    onClick() {
       this.$refs.fileInput.value = ''
       // further logic for file...
    }
  }

<input type = "file" @ change = "onFileChange" class = "input upload-input" ref = "inputFile" />

onFileChange(e) {
//upload file and then delete it from input 
 self.$refs.inputFile.value = ''
}