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

Get content of FormData with data set from form element

本文关键字：FormData 获取 数据集 表单 元素      更新时间：2023-09-26

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

您可以通过使用元素的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>

如果你想通过AJAX发送文件数据到你的服务器，你应该看看原生的HTML5 FileReader API。

下面是一个小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;
    }
  });
})
相关文章：