当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 使用FormData实现上传多个文件

使用FormData实现上传多个文件

2019年06月01日  | 移动技术网IT编程  | 我要评论

本文实例为大家分享了formdata上传多个文件的具体代码，供大家参考，具体内容如下

由于项目中使用到，特此写个demo

html代码：

<html>
<head>
 <title>title</title>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<form enctype="multipart/form-data" id="form_example">
 <input type="file" id="files" multiple/><br/><br/>
 <input type="submit" value="提交"/>
</form>

<div id='file-list-display'></div>
</body>
</html>

js代码：

<script type="text/javascript">
 $(document).ready(function () {
  var filelist = [];
  var filecatcher = document.getelementbyid('form_example');
  var files = document.getelementbyid("files"), renderfilelist;
  var filelistdisplay = document.getelementbyid('file-list-display'), sendfile;

  filecatcher.addeventlistener("submit", function (event) {
   event.preventdefault();
   //上传文件
   sendfile();
  });

  files.addeventlistener("change", function (event) {
   for (var i = 0; i < files.files.length; i++) {
    filelist.push(files.files[i]);
   }
   renderfilelist();
  });

  renderfilelist = function () {
   filelistdisplay.innerhtml = '';
   filelist.foreach(function (file, index) {
    var filedisplayel = document.createelement("p");
    filedisplayel.innerhtml = (index + 1) + ":" + file.name;
    filelistdisplay.appendchild(filedisplayel);
   })
  };

  sendfile = function () {
   var formdata = new formdata();
   var request = new xmlhttprequest();
   //循环添加到formdata中
   filelist.foreach(function (file) {
    formdata.append('files', file, file.name);
   })
   request.open("post", "/test/upload.do");
   request.send(formdata);
  }
 })
</script>

后端使用spring mvc接收前端文件

配置multipart解析器：

<bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver"
   p:defaultencoding="utf-8"/>

controller：

@requestmapping("/upload.do")
@responsebody
public object upload(@requestparam multipartfile[] files) {
  system.out.println(files.length);
  return "ok";
}

前端页面：

请求：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网