Aynı dosya seçildiğinde tetiklenmeyen HTML giriş dosyası seçim etkinliği

Kullanıcının inputtür fileöğesinin HTML'si için yaptığı her dosya seçimini algılama şansı var mı ?

Bu daha önce birçok kez sorulmuştur, ancak onchangekullanıcı aynı dosyayı tekrar seçerse genellikle önerilen olay tetiklenmez.

Değerini ayarlayın inputiçin nullher biri üzerinde onclickolay. Bu, inputdeğerini sıfırlar ve onchangeaynı yol seçilse bile olayı tetikler .

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

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

İşte bir DEMO .

Not: Dosyanıza 'C: \ fakepath \' ön eki konulması normaldir. Bu, JavaScript'in dosyanın mutlak yolunu bilmesini engelleyen bir güvenlik özelliğidir. Tarayıcı hala dahili olarak biliyor.

<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; yalnızca Chrome için gereklidir, Firefox yalnızca return false;

İşte bir FIDDLE

Bu makalede, "Seçmek için form girişini kullanma" başlığı altında

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>

'Değişiklik' için bir olay dinleyicisi ekler, ancak test ettim ve aynı dosyayı seçseniz bile iptal ederseniz bile tetikler.

Kullanıcı alanı her tıkladığında, hedef girdinin değerini temizlemek için onClick olayını kullanın. Bu, onChange olayının aynı dosya için de tetiklenmesini sağlar. Benim için çalıştı :)

onInputClick = (event) => {
    event.target.value = ''
}

<input type="file" onChange={onFileChanged} onClick={onInputClick} />

TypeScript Kullanma

onInputClick = ( event: React.MouseEvent<HTMLInputElement, MouseEvent>) => {
    const element = event.target as HTMLInputElement
    element.value = ''
}

Dosya başarıyla yüklendikten sonra yapmak istediğiniz her şeyi yapın. Sadece dosya işleme işleminizin tamamlanmasından sonra dosya denetiminin değerini boş string olarak ayarlayın. örneğin bu şeyi yapabilir ve benim için cazibe gibi çalışabilirsin

   $('#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 = ''
}

Benim için çalışılan 0. girdi endeksinin değerini silmek . Lütfen aşağıdaki kodu deneyin, umarım bu işe yarar (AngularJs).

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