It is possible to check if a input was not changed using change() event?

I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.

Right now, i just made a normal change() event:

 // fire the thumbnail (img preview)
$("#file-input").on("change", function () {
    readURL(this); // create the thumbnail
});

what i'm missing ?

Prev Solutuib:

well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...

but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.

so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.

It is possible to check if a input was not changed using change() event?

I'm working with <input type='file' /> and i want to warning the user that no changes was made on his own action.

Right now, i just made a normal change() event:

 // fire the thumbnail (img preview)
$("#file-input").on("change", function () {
    readURL(this); // create the thumbnail
});

what i'm missing ?

Prev Solutuib:

well, i found a workaround for this, the real problem is that i give a option to the user to hide the thumbnail, and if he wants, open again...

but the thumbnail will only open when the user select a image, that's the problem, because the change event fire this option to open, so, if no change, no thumbnail open.

so, when i hide the thumbnail, i change the input file for a new one, making the change event always fire.

• javascript
• jquery
• callback
• thumbnails

• Value of a file input is a fakepath. Does your file input have a default value? How? – Ram Commented Aug 31, 2012 at 19:21
• @undefined - but it does get the filename, so it can be pared, just not with the change event, and of course not the path, as that will just be "fakepath" etc. – adeneo Commented Aug 31, 2012 at 19:25
• @adeneo Yes, it gets the filename, the question is how a file input can have a default value? Surely he want's to check the file input on submit event, so if the value of file input is empty he can alert something. – Ram Commented Aug 31, 2012 at 19:26
• i think FF generate a url file to make his preview always diferent, so change works perfect. the problem is with chrome, he just dont change anything and do not fire my change event – Ricardo Binns Commented Aug 31, 2012 at 19:28
• Chrome fires the change event if there actually is a change, if the same file is selected, it does not fire. – adeneo Commented Aug 31, 2012 at 19:29

3 Answers 3

Use a variable to store the last value of the input, and pare to the current value on change event, if they are the same, no change was made :

var last_value = $("#file-input").val();

$("#file-input").on("change", function () {
    if (this.value === last_value) alert('no change');
    last_value=this.value;
});

EDIT: Or you can always just replace the input tag with another, like this SO answer suggest :

var $c  = $("#container");
var $f1 = $("#container .f1");

function FChange() {
    alert("f1 changed");

    $(this).remove();
    $("<input type='file' class='f1' />").change(FChange).appendTo($c);
}

$f1.change(FChange);

<input type="file" id="file-input" data-url="intial-value" />

$("#file-input").on("change", function () {
    if($(this).val() != $(this).data('url'){
       //value has changed
       $(this).data('url', $(this).val())
    }
    else{
       return false;
    }

});

 $("#file-input").on("change", function () {
    if($(this).data('last-val')){
        // do something
    } else {
       $(this).data('last-val',$(this).val());
       //do something else
    }
 });