Sự kiện lựa chọn tệp đầu vào HTML không kích hoạt khi chọn cùng một tệp

Có bất kỳ cơ hội nào để phát hiện mọi lựa chọn tệp mà người dùng đã tạo cho HTML không input loại filephần tử không?

Điều này đã được hỏi nhiều lần trước đây, nhưng onchangesự kiện thường được đề xuất sẽ không kích hoạt nếu người dùng chọn lại cùng một tệp.

Thiết lập giá trị của inputđể nulltrên mỗi onclicksự kiện. Điều này sẽ đặt lại inputgiá trị của và kích hoạt onchangesự kiện ngay cả khi cùng một đường dẫn được chọn.

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

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

Đây là một DEMO .

Lưu ý: Điều đó là bình thường nếu tệp của bạn có tiền tố là 'C: \ fakepath \'. Đó là một tính năng bảo mật ngăn JavaScript biết đường dẫn tuyệt đối của tệp. Trình duyệt vẫn biết nó trong nội bộ.

<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; chỉ cần thiết cho Chrome, Firefox sẽ hoạt động tốt chỉ với return false;

Đây là một FIDDLE

Trong bài viết này, dưới tiêu đề "Sử dụng biểu mẫu nhập để chọn"

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>

Nó thêm trình lắng nghe sự kiện vào 'thay đổi', nhưng tôi đã kiểm tra nó và nó kích hoạt ngay cả khi bạn chọn cùng một tệp chứ không phải nếu bạn hủy.

Sử dụng sự kiện onClick để xóa giá trị của mục tiêu đầu vào, mỗi lần người dùng nhấp vào trường. Điều này đảm bảo rằng sự kiện onChange cũng sẽ được kích hoạt cho cùng một tệp. Đã làm cho tôi :)

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

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

Sử dụng TypeScript

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

Làm bất cứ điều gì bạn muốn làm sau khi tải tệp thành công. Chỉ sau khi hoàn thành quá trình xử lý tệp của bạn, đặt giá trị của điều khiển tệp thành chuỗi trống. Vì vậy, .change () sẽ luôn được gọi ngay cả khi tên tệp thay đổi hay không. ví dụ như bạn có thể làm điều này và làm việc cho tôi như sự quyến rũ

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

Xóa giá trị của chỉ số 0 của đầu vào làm việc cho tôi . Vui lòng thử mã dưới đây, hy vọng nó sẽ hoạt động (AngularJs).

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