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?
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());
});
});