jquery - jQuery-获取文件输入元素？

我有以下标记：

  <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处理程序中获取file1的文件元素并调用ajax，即如何将此行更改为：

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

    });
});

最佳答案

您正在寻找$(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>