HTML <input type = 'file'> Sự kiện chọn tệp

142

Giả sử chúng ta có mã này:

<form action='' method='POST' enctype='multipart/form-data'>
    <input type='file' name='userFile'><br>
    <input type='submit' name='upload_btn' value='upload'>
</form>

kết quả trong việc này:

hình ảnh hiển thị nút duyệt và tải lên

Khi người dùng nhấp vào nút 'Duyệt ...', hộp thoại tìm kiếm tệp sẽ được mở:

hình ảnh hiển thị một hộp thoại tìm kiếm tập tin với một tập tin được chọn

Người dùng sẽ chọn tệp bằng cách nhấp đúp vào tệp hoặc bằng cách nhấp vào nút 'Mở'.

Có sự kiện Javascript nào mà tôi có thể sử dụng để được thông báo sau khi tệp được chọn không?

javascript html javascript-events

— Mặt trăng
nguồn

5

Thật là một giao diện người dùng cũ thú vị!

— El-Burritos

@ El-Burritos này đã được đăng vào năm 2010; tất nhiên, đó là một giao diện người dùng Windows cũ: D

— Simon Cheng

179

Nghe sự kiện thay đổi.

input.onchange = function(e) { 
  ..
};

— Anurag
nguồn

3

chúng ta sẽ viết nó ở đâu .. trong các thẻ script javascript

— Moon

5

có trong các thẻ script hoặc bạn có thể thêm nó dưới dạng một thuộc tính ( <input type="file" onchange="..." />) mặc dù điều này không được khuyến khích.

— Anurag

7

Lưu ý rằng trong IE7 và 8, sự kiện 'thay đổi' không xảy ra với sự kiện biểu mẫu. Bạn cần đặt trình nghe của mình vào thẻ <input>.

— xer0x

36

Nếu người dùng cần "tải lại" một tập tin thì sao? onchange sẽ không kích hoạt, nhưng nó vẫn nên tải lại như thể nó đang tải lần đầu tiên.

— bryc

11

Lưu ý, điều này không hoạt động nếu người dùng chọn cùng một tệp nhiều lần liên tiếp vì tệp không thay đổi.

— bob0the0mighty

45

Khi bạn phải tải lại tệp, bạn có thể xóa giá trị đầu vào. Lần tới khi bạn thêm một tệp, sự kiện 'thay đổi' sẽ kích hoạt.

document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick

— Clem
nguồn

5

Điều đó hoạt động tốt nhưng nhận thức được hành vi kỳ lạ <11 IE. Nó không cho phép bạn thay đổi giá trị đầu vào, vì vậy rất có thể bạn sẽ cần một cách giải quyết. stackoverflow.com/questions/9011644/

— hy

15

Cách jQuery:

$('input[name=myInputName]').change(function(ev) {

    // your code
});

— Zanon
nguồn

3

Sự kiện Thay đổi được gọi ngay cả khi bạn nhấp vào hủy ..

— anthony
nguồn

2

sẽ rất hữu ích nếu bạn cung cấp một số mã để giải thích câu trả lời của mình, vì không có sự kiện thay đổi nào được đề cập trong đoạn mã Câu hỏi

— DevDig

Tôi nghĩ rằng @anthony đang đề cập đến kịch bản sau đây: Chọn một tệp. Bây giờ hãy mở lại bộ chọn tệp, nhưng lần này bấm vào Hủy. Vì không có tệp nào được chọn lần thứ hai, nên điều khiển đầu vào tệp đặt lại, do đó thay đổi lựa chọn ban đầu và sự kiện thay đổi được kích hoạt.

— dvlsc

Tôi đã thử nó trên Chrome 83 và sự kiện không được kích hoạt khi tôi nhấp vào nút Hủy. Câu trả lời này khá cũ và tôi đoán nó phải được sửa, ít nhất là trên Chrome.

— Saeed Ahadian

3

Đó là cách tôi đã làm với JS thuần túy:

var files = document.getElementById('filePoster');
var submit = document.getElementById('submitFiles');
var warning = document.getElementById('warning');
files.addEventListener("change", function () {
  if (files.files.length > 10) {
    submit.disabled = true;
    warning.classList += "warn"
    return;
  }
  submit.disabled = false;
});

#warning {
    text-align: center;
}

#warning.warn {
	color: red;
	transform: scale(1.5);
	transition: 1s all;
}

<section id="shortcode-5" class="shortcode-5 pb-50">
    <p id="warning">Please do not upload more than 10 images at once.</p>
    <form class="imagePoster" enctype="multipart/form-data" action="/gallery/imagePoster" method="post">
        <div class="input-group">
  	    <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" />
	    <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button>
        </div>
    </form>
</section>

Mở rộng đoạn trích

— RegarBoy
nguồn