jQuery - get file input element?

Question

I have the following markup:

  <div class="file-container">
        <input type="file" name="file" id="file"  />
  </div>

I can get the uploaded file in my handler and ajax call as follows:

 $(document).on("change", ".file-container :file", function () {

    $.ajax({
        url: "xyz",
        type: "POST",
        files: $("form :file"),
        processData: false,
        dataType: "json"
    }).complete(function (data) {
       // do stuff

    });
});

But lets say i have two file inputs as follows:

 <div class="file-container">
    <input type="file" name="file1" id="file1"  />
 </div>

 <div class="file-container">
    <input type="file" name="file2" id="file2"  />
 </div>

On file1 change, how do i get the file element of file1 in my jQuery onchange handler and ajax call i.e what do i change this line to:

$(document).on("change", ".file-container :file", function ()

And this line:

files: $("form :file"),

The following doesnt work:

  $(document).on("change", ".file-container #file1", function () {

    $.ajax({
        url: "xyz",
        type: "POST",
        files: $("form #file1"),
        processData: false,
        dataType: "json"
    }).complete(function (data) {
       // do stuff

    });
  });

  $(document).on("change", ".file-container #file2", function () {

    $.ajax({
        url: "xyz",
        type: "POST",
        files: $("form #file2"),
        processData: false,
        dataType: "json"
    }).complete(function (data) {
       // do stuff

    });
});

Using inline onchange event for each input could be one approach of distinguishing which input was changed. — Abhi
– Abhi, Commented Dec 20, 2016 at 11:45

Jamiec · Accepted Answer · 2016-12-20 12:00:34Z

3

You're looking for $(this)

So this line:

 files: $("form :file"),

becomes

 files: $(this),

and the other stays as is.

$(document).on("change", ".file-container :file", function () {

    console.log($(this))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
    <input type="file" name="file1" id="file1"  />
 </div>

 <div class="file-container">
    <input type="file" name="file2" id="file2"  />
 </div>

If you want separate handlers, you may as well just use the id's

$(document).on("change", "#file1", function () {

  console.log("file1 handler",$(this))
});

$(document).on("change", "#file2", function () {

  console.log("file2 handler",$(this))
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="file-container">
    <input type="file" name="file1" id="file1"  />
 </div>

 <div class="file-container">
    <input type="file" name="file2" id="file2"  />
 </div>

edited Dec 20, 2016 at 12:00

answered Dec 20, 2016 at 11:47

Jamiec

136k15 gold badges141 silver badges202 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

adam78 Over a year ago

what if I want to use a named file input in my onchange event handler so that i can use two handlers - the reason being is that the ajax results for the two inputs do vary different things? So what would i change this bit too .file-container :file

Rahul · Accepted Answer · 2016-12-20 11:46:24Z

This happens because the value of the input field (the selected filepath) does not change if you select the same file again.

You can set the value in the onChange() event to an empty string and submit your form only if the value is not empty. Have a look at my sample and this link link

Sample

 $(document).on("change",".file-container input.file", function () {
    if ($(".file-container input.file").val() == "") {
        return;
    }
    // get the inputs value
    var fileInputContent = $(".file-container input.file").val();
    // your ajax submit
    alert("submit value of the file input field=" + fileInputContent);
    // reset the field
    $(".file-container input.file").replaceWith('<input type="file" class="file" name="file" />');
});

Collectives™ on Stack Overflow

jQuery - get file input element?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related