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?

`val()` is a jquery function, but `this` in your context is a DOM object. Try `this.value` or `$(this).val()` and see what happens. — Jason P, Nov 27 '13 at 13:56

score 40 · Answer 1 · edited Nov 27 '13 at 16:06

40

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

edited Nov 27 '13 at 16:06

Frank van Puffelen

565,676
79
828
807

answered Nov 27 '13 at 15:52

Humberto Corrêa

789
1
6
17

2

It seems firefox will fire the event even if it is the same image, but chrome will not. – ooolala Dec 04 '14 at 11:55

score 15 · Answer 2 · answered Nov 27 '13 at 13:58

15

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

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

answered Nov 27 '13 at 13:58

techfoobar

65,616
14
114
135

2

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? – Rajshekar Reddy Jul 29 '15 at 08:44

score 4 · Answer 3 · answered Jul 19 '18 at 12:03

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>

AAA · Answer 4 · 2013-11-27T14:46:20.033

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");
               });

edited Nov 27 '13 at 14:46

answered Nov 27 '13 at 14:00

AAA

142
7

1

This actually works. Binding the event to a parent element triggers the change-event every time it's actually changed. – russinkungen Sep 05 '17 at 14:53

Monday Fatigue · Answer 5 · 2021-09-07T14:28:33.707

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.

on change event for file input element

5 Answers5

Linked