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

这是因为如果再次选择相同的文件，输入字段（所选文件路径）的值不会改变。

您可以将onChange()事件中的值设置为空字符串，并仅在值不为空时提交表单。请查看我的示例和此链接link

<强>示例

 $(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" />');
});

Answer 2

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

jQuery - 获取文件输入元素？

2 个答案: