CODEWITHSUNDEEP
javascriptjqueryhtml
Fernando Gallego Fernández
Fernando Gallego Fernández

Reputation: 456

Detect a change in a file of a form using jQuery

I have the following code in my html file:

<form enctype="multipart/form-data" class="form1" name="form1">
    <input type="button" id="button1" class="button1" value="Update 1"/>
    <input name="archivo1" type="file" class="archivo1" id="archivo1" />
</form>
<form enctype="multipart/form-data" class="form2">
    <input type="button" id="button2" class="button2" value="Update 2"/>
    <input name="archivo2" type="file" class="archivo2" id="archivo2" />
</form>

So, I want to detect automatically any change of any file and make different actions depending on the file selected. If I use 

$(':file').change(function()
{
    //Code here
}

I want to know if I select the file named as archivo1 or the file named as archivo2. Any suggestions?

Regards!

Upvotes: 0

Views: 47

Answers (2)

mplungjan
mplungjan

Reputation: 177830

I want to detect automatically any change of any file and make different actions depending on the file selected

In that case I would give them the same class (or use your original $(":file")...) and test the ID or name

$(function() {
  $(".archivo").on("change",function() { 
   if (this.id == "archivo1") { ... // or this.name =="archivo1"
   }
   else if (this.id == "archivo2") { ... // or this.name =="archivo2"
   }
 });  
});

You can also look at the parent or the nearest form:

if ($(this).parent.attr("name")=="form1"

or

if ($(this).closest("form").attr("name")=="form1"

Upvotes: 2

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

You can use attribute equals selector like this:

$('input[type="file"][name="archivo1"]').change(function()
{
    //Code here
});

But since you're using id then you can use use that id as IDs are unique in the page.

$('#archivo1').change(function()
    {
        //Code here
    });

Updated as per notice as you need one change function to detect all particular file.

$(':file').change(function()
{
 if ($(this).attr('name')=='archivo1') {
    // ...
 }
//do check like above ...
});

Upvotes: 1

Related Questions