เหตุการณ์การเลือกไฟล์อินพุต HTML ไม่เริ่มทำงานเมื่อเลือกไฟล์เดียวกัน

มีโอกาสใดที่จะตรวจสอบการเลือกไฟล์ทุกไฟล์ที่ผู้ใช้ทำกับ HTML inputของประเภทfileองค์ประกอบหรือไม่

ก่อนหน้านี้มีการถามหลายครั้ง แต่onchangeเหตุการณ์ที่เสนอมักจะไม่เริ่มทำงานหากผู้ใช้เลือกไฟล์เดียวกันอีกครั้ง

กำหนดค่าของinputถึงเป็นnullในแต่ละonclickเหตุการณ์ สิ่งนี้จะรีเซ็ตค่าinputของและเรียกใช้onchangeเหตุการณ์แม้ว่าจะเลือกพา ธ เดียวกัน

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

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

นี่เป็นDEMO

หมายเหตุ: เป็นเรื่องปกติถ้าไฟล์ของคุณมีคำนำหน้าด้วย 'C: \ fakepath \' นี่เป็นคุณลักษณะด้านความปลอดภัยที่ป้องกันไม่ให้ JavaScript รู้เส้นทางที่แน่นอนของไฟล์ เบราว์เซอร์ยังคงรู้จักภายใน

<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

ในบทความนี้ภายใต้ชื่อเรื่อง "การใช้อินพุตแบบฟอร์มสำหรับการเลือก"

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>

มันเพิ่มตัวฟังเหตุการณ์เพื่อ 'เปลี่ยน' แต่ฉันทดสอบแล้วมันจะทริกเกอร์แม้ว่าคุณจะเลือกไฟล์เดียวกันและไม่ใช่ถ้าคุณยกเลิก

ใช้เหตุการณ์ 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 = ''
}

ทำสิ่งที่คุณต้องการทำหลังจากโหลดไฟล์สำเร็จแล้วหลังจากการประมวลผลไฟล์ของคุณเสร็จสิ้นให้ตั้งค่าการควบคุมไฟล์เป็นสตริงว่างดังนั้น. change () จะถูกเรียกเสมอแม้ชื่อไฟล์จะเปลี่ยนไปหรือไม่ก็ตาม เช่นเช่นคุณสามารถทำสิ่งนี้และทำงานให้ฉันเหมือนมีเสน่ห์

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

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

การล้างค่าของดัชนี 0 ของท่านทำงานให้ฉัน โปรดลองรหัสด้านล่างหวังว่ามันจะใช้งานได้ (AngularJs)

          scope.onClick = function() {
            input[0].value = "";
                input.click();
            };