วิธีการเริ่มต้นเหตุการณ์ในไฟล์เลือก

ฉันมีรูปแบบเป็น

<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
};

นี่เป็นคำถามที่เก่ากว่าซึ่งต้องการคำตอบที่ใหม่กว่าซึ่งจะกล่าวถึงข้อกังวลของ @Christopher Thomas ข้างต้นในความคิดเห็นของคำตอบที่ยอมรับ หากคุณไม่ออกจากหน้าแล้วเลือกไฟล์เป็นครั้งที่สองคุณต้องล้างค่าเมื่อคุณคลิกหรือทำการทัชสตาร์ต (สำหรับมือถือ) ด้านล่างนี้จะใช้งานได้แม้ว่าคุณจะออกจากเพจและใช้ 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.
    });

วิธีแก้ปัญหาสำหรับผู้ใช้ vue การแก้ปัญหาเมื่อคุณอัปโหลดไฟล์เดียวกันหลาย ๆ ครั้งและเหตุการณ์ @change ไม่ทริกเกอร์:

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

vanilla js โดยใช้ es6

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