Question

我正在尝试使用AJAX上传文件。但是，我遇到了从表单中获取文件的问题。我想收集所有的

<input type="file">

嵌套在表单中的字段，而不使用其特定的ID。所以，不就像这样：

console.log($( "#i_dont_want_to_query_for_this_id" )[0].files);
//FileList {0: File, length: 1}

我觉得必须有一种方法可以从表单元素本身获取它们：

<form class="part-form">
  ...
  <input type="file" id="i_dont_want_to_query_for_this_id">
</form>

这就是我处理提交的方式：

$( ".part-form" ).each(function () {
        var $me = $( this );
        $me.on('submit', function (event) {
            event.preventDefault();
            var formElement = $me[0];
            var fd = new FormData(formElement);
            ...
 }

我想这也可以使用类和each()来实现，但我觉得必须有一种方法可以通过简单地使用表单中的数据来获取提交表单中的所有文件，我只是不能找到它。

非常感谢任何帮助！

Answer 1

您可以使用$("file[type=input]")之类的属性选择器来获取所有文件输入。这是一个fiddle。

$(document).ready(function() {
    $( ".part-form" ).each(function () {
          var $me = $( this );
          $me.on('submit', function (event) {
              event.preventDefault();
              var $resultDiv = $("#result-div");
              $me.find("input[type=file]").each(function(index, fileInput) {
                  for(var i = 0; i < fileInput.files.length; i++) {
                      // Do whatever you really want to do with the file.
                      var $span = $("<span />");
                      $span.text(fileInput.files[i].name);
                      $resultDiv.append($span);
                  }
              })
          });
     });
})

Answer 2

使用可以使用选择器 $（＆＃34;输入[type =＆＃39; file＆＃39;]＆＃34;）

＆＃13;

$(document).on('change', 'input[type="file"]', function(){

  console.log($(this)[0].files)
  alert($(this)[0].files)
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="part-form">
  ...
  <input type="file" id="i_dont_want_to_query_for_this_id">
  
  <input type="file" id="i_dont_want_to_query_for_this_id2">
</form>

＆＃13;

从表单获取文件而不查询输入字段

2 个答案: