首页 > 编程 > Java > 正文

springmvc+ajax+formdata上传图片代码实例

2019-11-26 08:38:43
字体:
来源:转载
供稿:网友

最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下。上传文件的方式有多种,这里对使用FormData的方式进行说明。

1、springmvc项目想要上传文件,需要使用multipart方式,所以在spring-mvc.xml配置文件中需要增加multipart相关配置,代码如下

<bean id="multipartResolver"    class="org.springframework.web.multipart.commons.CommonsMultipartResolver">    <!-- one of the properties available; the maximum file size in bytes -->    <property name="maxUploadSize" value="50000000"/>  </bean>

2、jsp代码

<form action="picUpload" method="post" enctype="multipart/form-data" id="fileForm">  <input type="file" id="pic" name="pic" multiple><br><br>    <input type="text" id="id" name="id"><br><br>  <input type="text" id="name" name="name"><br><br>  <input type="button" value="上传" onclick="morePicUpload()"> </form>

需要注意的是,form 的 enctype 值必须为 multipart/form-data,这样才能在提交表单的时候传递文件数据。

如果要一次选择多个文件,可以在file表单添加"multiple",这样在选择文件时可以一次选择多个文件。

3、js代码

function morePicUpload(){  var formData = new FormData(document.getElementById("fileForm"));  alert(0);  $.ajax({    url : basePath+"morePicUpload",    type : "post",    data :formData,    async : false,    cache : false,     dataType : "json",    contentType : false,    processData : false,    success : function(data){      //code    }  });}

先创建formData,用来存放表单中的内容,"fileForm"为jsp页面中form的id。

4、最后的是controller,代码如下

@RequestMapping("/morePicUpload")  @ResponseBody  public ResultTo morePicUpload(HttpServletRequest request){        ResultTo resultTo = new ResultTo();    resultTo.setData("");        MultipartHttpServletRequest multipartRequest = (MultipartHttpServletRequest) request;            String id = multipartRequest.getParameter("id");    String name = multipartRequest.getParameter("name");    System.out.println(id);    System.out.println(name);        List<MultipartFile> filelist = multipartRequest.getFiles("pic");    for(MultipartFile file:filelist){      if(!file.isEmpty()){        System.out.println(file.getOriginalFilename());      }    }    return resultTo;  }

使用"MultipartHttpServletRequest"可以获取form表单中的所有空间内容,文件可以通过"List<MultipartFile> filelist = multipartRequest.getFiles("pic");"方式获取,然后进行文件的上传等操作就行了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持武林网。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表