javascript - 使用表单元素中的数据集获取 FormData 的内容

Question

我有formData来自<form>元素，我想获取表单内元素的内容，但使用 formData 。如您所见，我没有使用 formData.append() 。另外，请不要发布带有 form.find('input').val() 的答案。 ，因为它没有回答我的问题。我会用formData在 ajax 中，这就是我在这里的原因。

简单的例子:

$(function() {
    var form = $('#test');

    form.on('submit', function(e) {
        e.preventDefault();
        var formData = new FormData(form[0]);
        console.log(formData.get('file'));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="test">
  <input type="file" name="file" accept="image/*">
  <input type="submit">
</form>

Answer 1

您可以通过使用元素的 id 来做到这一点。

console.log($('#image').get(0).files[0]);

<input type="file" name="file" accept="image/*" id="image">

可以使用 each 附加多个文件

var data = new FormData();
$.each($('#image')[0].files, function(i, file) {
    data.append('file-'+i, file);
});

//Program a custom submit function for the form
$("form#test").submit(function(event){
  //disable the default form submission
  event.preventDefault();
  //Other data
  console.log($(this).serialize());
  //File data
  console.log($('#image').get(0).files);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form enctype="multipart/form-data" id="test" method="post">
  <input type="text" name="firstname">
  <input type="text" name="lastname">
  <input type="file" name="file" id="image">
  <input type="submit">
</form>