jQuery - 获取文件输入元素？

Question

我有以下标记:

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

我可以在我的处理程序和 ajax 调用中获取上传的文件，如下所示:

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

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

    });
});

但假设我有两个文件输入，如下所示:

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

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

在 file1 更改时，如何在 jQuery onchange 处理程序和 ajax 调用中获取 file1 的文件元素，即我该如何将此行更改为:

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

这一行:

files: $("form :file"),

以下方法不起作用:

  $(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

    });
});

Answer 1

您正在寻找$(this)

所以这一行:

 files: $("form :file"),

变成了

 files: $(this),

另一个保持原样。

$(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>

如果您想要单独的处理程序，您也可以只使用 id

$(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>