Một chút nghiên cứu chỉ ra rằng không có cách nào để phát hiện khi Hủy được chọn trong cửa sổ hộp thoại Chọn tệp. Bạn có thể sử dụng onchange hoặc onblur để kiểm tra xem tệp đã được chọn hay chưa hoặc một cái gì đó đã được thêm vào đầu vào value.
Điều này có thể trông giống như: https://jsfiddle.net/Twisty/j18td9cs/
HTML
<form>
Select File:
<input type="file" name="test1" id="testFile" />
<button type="reset" id="pseudoCancel">
Cancel
</button>
</form>
Javascript
var inputElement = document.getElementById("testFile");
var cancelButton = document.getElementById("pseudoCancel");
var numFiles = 0;
inputElement.onclick = function(event) {
var target = event.target || event.srcElement;
console.log(target, "clicked.");
console.log(event);
if (target.value.length == 0) {
console.log("Suspect Cancel was hit, no files selected.");
cancelButton.onclick();
} else {
console.log("File selected: ", target.value);
numFiles = target.files.length;
}
}
inputElement.onchange = function(event) {
var target = event.target || event.srcElement;
console.log(target, "changed.");
console.log(event);
if (target.value.length == 0) {
console.log("Suspect Cancel was hit, no files selected.");
if (numFiles == target.files.length) {
cancelButton.onclick();
}
} else {
console.log("File selected: ", target.value);
numFiles = target.files.length;
}
}
inputElement.onblur = function(event) {
var target = event.target || event.srcElement;
console.log(target, "changed.");
console.log(event);
if (target.value.length == 0) {
console.log("Suspect Cancel was hit, no files selected.");
if (numFiles == target.files.length) {
cancelButton.onclick();
}
} else {
console.log("File selected: ", target.value);
numFiles = target.files.length;
}
}
cancelButton.onclick = function(event) {
console.log("Pseudo Cancel button clicked.");
}
Tôi đề nghị làm riêng hủy hoặc thiết lập lại nút của bạn mà resets các hình thức hoặc xóa giá trị từ đầu vào.
Từ '.change() 'không được thực hiện bởi tất cả các trình duyệt, nên tìm kiếm sự kiện đó được gọi. Các trình duyệt của họ mà bạn đang muốn làm việc cụ thể phải không? – Twisty
Một số thử nghiệm với https://jsfiddle.net/Twisty/j18td9cs/ này, trong FF, và vì 'Hủy' là phần tử của hộp thoại trình duyệt, tôi chỉ có thể kiểm tra xem tệp đã được chọn hay chưa. Tôi nhận thấy nếu tôi chọn một tập tin, và sau đó duyệt một lần thứ hai, và nhấn hủy bỏ, nó giữ lại giá trị tập tin ... do đó, đó không phải là giúp đỡ ở đây. Có thể tạo nút Hủy của riêng bạn trong trang. Cố gắng để xem nếu một cái gì đó được cập nhật hoặc trả lại nếu hủy bỏ được chọn, giống như với 'confirm()' hoặc 'prompt()'. – Twisty