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

Question

I'm trying to upload files using AJAX. However, I'm having issues grabbing the files from my form. I want to gather all the

<input type="file">

fields that are nested within the form, without using their specific ids. So, not like this:

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

I feel there must a be way to get them from the form element itself:

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

This is how I handle the submit:

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

I guess this can also be achieved using classes and each() on these, but I feel there must be a way to grab all files in a submitted form by simply using the data in the form itself, I just cannot find it.

Any help is greatly appreciated!

Answer 1

You can use an attribute selector like $("file[type=input]") to get all the file inputs. Here's a 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

Use can use selector $("input[type='file']")

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

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