如何使用FormData将文件上传到服务器?

时间:2016-05-11 00:31:46

标签: javascript jquery forms

我尝试使用FormData对象将文件上传到spring服务器。我隐藏type="file"的输入。但是,当我提交表单时,它不起作用。我不知道哪里不对。

这是html的一部分。单击某个按钮时,将调用saveFiles()

<script src="http://malsup.github.com/jquery.form.js"></script> 

<form name="fileForm" id="fileForm" method="post" enctype="multipart/form-data">
  <input style="display:none" type="file" id="fileSelector" name="fileSelector" multiple="" />
  <input type="hidden" id="docId" value="${doc.id}" />
  <div id="files"></div>
</form>

(function (global, $) {
  ...
  initFilehandler();
  ...
}

function initFilehandler() {
  document.querySelector('#fileSelector').addEventListener('change', handleFileSelect, false);
  selDiv = document.querySelector("#files");
}

function saveFiles() {
  $("form#fileForm").submit(function(event){
  event.preventDefault();
   
  var formData = new FormData($(this)[0]);
   
  console.log(formdata);
    $.ajax({
      url: "/rd/file/save",
      type: "POST",
      data: formData,
      async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function () {
        alert("success");
      }
    });
  });
}

1 个答案:

答案 0 :(得分:0)

您无法使用formdata上传文件。这个有很多选择。但是我给你一个不太复杂的。

尝试使用此插件:

jQuery Form

我多年来一直在使用它,特别是多个文件上传。好东西..这些插件有回调上传进度..你可以制作进度条或其他东西..