về sự kiện thay đổi cho phần tử nhập tệp

Question

Tôi có 4 đầu vào tệp mà tôi muốn chúng kích hoạt quá trình tải lên khi giá trị của chúng được thay đổi. Tôi có nghĩa là khi bạn chọn một hình ảnh và nhấp vào mở trên hộp thoại chọn hình ảnh, kịch bản để tải lên hình ảnh được kích hoạt. Tôi đã sử dụng onchange sự kiện nhưng tôi nghĩ rằng đây không phải là trường hợp phải:

JS:

$("input[type=file]").on('change',function(){ 
    alert(this.val());//I mean name of the file 
}); 

HTML:

<div class="form-group col-md-11 col-md-offset-1"> 
    <input type="file" name="photos[]"> 
    <input type="file" name="photos[]"> 
    <input type="file" name="photos[]"> 
    <input type="file" name="photos[]"> 
</div> 

Tôi nên làm gì?

Answer 1

Sử dụng files filelist của nguyên tố này thay vì val()

$("input[type=file]").on('change',function(){ 
    alert(this.files[0].name); 
}); 

Answer 2

Cho lớp độc đáo và id khác nhau cho tập tin đầu vào

  $("#tab-content").on('change',class,function() 
       { 
        var id=$(this).attr('id'); 
         $("#"+id).trigger(your function); 
       //for name of file input $("#"+id).attr("name"); 
       }); 

Answer 3

Sự kiện OnChange là một lựa chọn tốt. Nhưng nếu người dùng chọn cùng một hình ảnh, sự kiện sẽ không được kích hoạt vì giá trị hiện tại giống với giá trị trước đó.

Hình ảnh giống với chiều rộng đã thay đổi, ví dụ và hình ảnh phải được tải lên máy chủ.

Để ngăn chặn vấn đề này bạn có thể sử dụng đoạn mã sau:

$(document).ready(function(){ 
    $("input[type=file]").click(function(){ 
     $(this).val(""); 
    }); 

    $("input[type=file]").change(function(){ 
     alert($(this).val()); 
    }); 
});