on change event for file input element

Question

I have 4 file inputs that I want them trigger upload proccess when their value is changed. I mean when you select a picture and click open on select image dialog, the script to upload the picture be triggered. I've used onchange event but I think this is not the right event:

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> 

What should I do?

Answer 1

The OnChange event is a good choice. But if a user select the same image, the event will not be triggered because the current value is the same as the previous.

The image is the same with a width changed, for example, and it should be uploaded to the server.

To prevent this problem you could to use the following code:

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

Answer 2

Use the files filelist of the element instead of val()

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