สมมติว่าเรามีรหัสนี้:
<form action='' method='POST' enctype='multipart/form-data'>
<input type='file' name='userFile'><br>
<input type='submit' name='upload_btn' value='upload'>
</form>
ซึ่งส่งผลให้เกิดสิ่งนี้:
เมื่อผู้ใช้คลิกปุ่ม 'เรียกดู ... ' กล่องโต้ตอบค้นหาไฟล์จะเปิดขึ้น:
ผู้ใช้จะเลือกไฟล์โดยการดับเบิลคลิกที่ไฟล์หรือคลิกปุ่ม "เปิด"
มีเหตุการณ์ Javascript ที่ฉันสามารถใช้เพื่อรับการแจ้งเตือนหลังจากเลือกไฟล์ได้หรือไม่
คำตอบ:
รับฟังเหตุการณ์การเปลี่ยนแปลง
input.onchange = function(e) {
..
};
<input type="file" onchange="..." />) แม้ว่าจะไม่แนะนำ
เมื่อคุณต้องโหลดไฟล์ซ้ำคุณสามารถลบค่าของอินพุตได้ ครั้งต่อไปที่คุณเพิ่มไฟล์เหตุการณ์ "on change" จะทริกเกอร์
document.getElementById('my_input').value = null;
// ^ that just erase the file path but do the trick
วิธี jQuery:
$('input[name=myInputName]').change(function(ev) {
// your code
});
เหตุการณ์การเปลี่ยนแปลงจะถูกเรียกแม้ว่าคุณจะคลิกยกเลิก ..
นั่นคือวิธีที่ฉันทำกับ JS บริสุทธิ์:
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>