如何在文件选择上触发事件

Question

我有一个表格

<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 事件。我想删除上传按钮，一旦在输入中选择了文件，我想触发事件。我该怎么做？？

Answer 1

在文件输入上使用更改事件。

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

Answer 2

您可以在输入字段上订阅 onchange 事件：

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

然后：

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

Answer 3

这是一个较旧的问题，需要更新的答案来解决@Christopher Thomas 在接受答案的 cmets 中的上述问题。如果您没有离开页面然后再次选择文件，则需要在单击或执行 touchstart（对于移动设备）时清除该值。即使您离开页面并使用 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
});

Answer 4

在文件加载成功后做任何你想做的事。在文件处理完成后将文件控制的值设置为空白字符串。所以即使文件名更改或不更改，也会始终调用 .change() .例如，您可以做这件事并像魅力一样为我工作

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

Answer 5

vue 用户解决方案，解决多次上传同一个文件，@change 事件未触发的问题：

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

Answer 6

使用 es6 的原生 js

document.querySelector('input[name="file"]').addEventListener('change', (e) => {
 const file = e.target.files[0];
  // todo: use file pointer
});

Answer 7

<input id="fusk" type="file" name="upload" style="display: none;"
    onChange=" document.getElementById('myForm').submit();"
>

Answer 8

<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 = ''
}