in caso di modifica dell'elemento di input del file

Question

Ho 4 input di file che desidero caricare durante il loro valore. Intendo quando si seleziona un'immagine e si fa clic su Apri nella finestra di dialogo Seleziona immagine, viene attivato lo script per caricare l'immagine. Ho usato onchange evento, ma credo che questo non è l'evento:

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> 

Cosa devo fare?

Answer 1

Utilizzare la files filelist dell'elemento anziché val()

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

Answer 2

Dare classe unica e diversa id per l'input di file

  $("#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

L'evento OnChange è una buona scelta. Ma se un utente seleziona la stessa immagine, l'evento non verrà attivato perché il valore corrente è lo stesso del precedente.

L'immagine è la stessa con una larghezza modificata, ad esempio, e dovrebbe essere caricata sul server.

Per evitare questo problema si potrebbe utilizzare il seguente codice:

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

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