Question

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

简单示例：

$(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来完成。

user_tab_cols

使用console.log($('#image').get(0).files[0]); <input type="file" name="file" accept="image/*" id="image">

可以追加多个文件

each

＆＃13;

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

＆＃13;

//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);
});

＆＃13;

Answer 2

如果您想通过AJAX将文件数据发送到服务器，您应该查看本机HTML5 FileReader API。

这里以a little JSFiddle为例，获取文件的Base64字符串。我希望这会有所帮助。

HTML：

<form method="post" enctype="multipart/form-data" id="test">
  <input type="file" name="file" accept="image/*"><br />
  <select name="format">
    <option value="0">Binary String</option>
    <option value="1" selected>DataURL (Base64)</option>
    <option value="2">Text</option>
  </select><br />
  <input type="submit">
</form>

<textarea id="fileData" cols="100" rows="20"></textarea>

JavaScript的：

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

  form.on('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(form[0]);
    var reader = new FileReader();
    var format = formData.get('format');
    var file = formData.get('file');
    switch (format) {
      case "0":
        reader.readAsBinaryString(file);
        break;
      case "1":
        reader.readAsDataURL(file);
        break;
      case "2":
        reader.readAsText(file);
        break;
      default:
        reader.readAsDataURL(file);
        break;
    }
    reader.onloadend = function(e){
      document.getElementById("fileData").innerHTML = e.target.result;
    }
  });
})

使用表单元素

2 个答案: