42

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?

Improve this question
1
  • 2
    val() is a jquery function, but this in your context is a DOM object. Try this.value or $(this).val() and see what happens. Commented Nov 27, 2013 at 13:56

6 Answers 6

Reset to default
43

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()); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

It seems firefox will fire the event even if it is the same image, but chrome will not.
15

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

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

1 Comment

When does the change event trigger? Is it when we choose a new file or when the file is loaded completely? If its the former then how can I trigger event when file is loaded completely?
4

For someone who want to use onchange event directly on file input, set onchange="somefunction(), example code from the link:

<html> <body> <script language="JavaScript"> function inform(){ document.form1.msg.value = "Filename has been changed"; } </script> <form name="form1"> Please choose a file. <input type="file" name="uploadbox" size="35" onChange='inform()'> <br><br> Message: <input type="text" name="msg" size="40"> </form> </body> </html>
Improve this answer

Comments

3

Give unique class and different id for file input

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

1 Comment

This actually works. Binding the event to a parent element triggers the change-event every time it's actually changed.
1

In HTML, file selection part could be done like this:

<input type ="file" onchange="readURL(this);" required name ="my_img" id ="my_img" class="inputfile">

Now if I want to trigger an .on('change'...) event, I could do:

$('.inputfile').on('change', function() { // Call the function ... });
Improve this answer

Comments

0

Although correct that onchange event is triggered when you select a file with an input element, value property of HTMLInputElement with type="file" will be a fake path such as C:\fakepath\image.jpg.

As Jason P said,

val() is a jquery function, but this in your context is a DOM object.

Try this.value or $(this).val()

On another note, as Humberto Corrêa pointed out,

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

The fact is, even if the file content is different, the event might not occur unless the file name or size also has been changed. Refer following code snippet if you want the input event to always trigger.

// Always fire input event on file inputs // even when file name or size hasn't changed var emptyFileList = $('<input type="file">').get(0).files; $input.filter('[type=file]').on('click', function() { // 1. Backup current file list $(this).prop('originalFile', this.files); // 2. Clear current file list $(this).prop('files', emptyFileList); }).on('input', function() { // 3. If the new file list is empty, try to restore previous file list if (this.files === emptyFileList) { this.files = $(this).prop('originalFile'); } });

this.files is a FileList object containing all the files selected with the input.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.