HTML <input type = 'file'> Lựa chọn tập tin Event

Question

Hãy nói rằng chúng tôi 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> 

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

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

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 mà tôi có thể sử dụng để được thông báo sau khi tệp được chọn không?

Answer 1

Nghe sự kiện thay đổi.

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

Answer 2

Khi bạn phải tải lại tệp, bạn có thể xóa giá trị của đầu vào. Lần tới khi bạn thêm 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 

Answer 3

jQuery cách:

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

    // your code 
}); 

Answer 4

The Change sự kiện được gọi là ngay cả khi bạn click vào hủy ..

Answer 5

Đó là cách tôi đã làm nó với JS tinh khiết:

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 { 
 
\t color: red; 
 
\t transform: scale(1.5); 
 
\t 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"> 
 
    \t  <input id="filePoster" type="file" class="form-control" name="photo" required="required" multiple="multiple" /> 
 
\t  <button id="submitFiles" class="btn btn-primary" type="submit" name="button">Submit</button> 
 
     </div> 
 
    </form> 
 
</section>