springmvc+ajax+formdata上传图片代码实例
程序员文章站
2022-06-21 08:12:34
最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下。上传文件的方式有多种,这里对使用formdata的方式进行说明。
1、springmvc项目想要上传文件,...
最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下。上传文件的方式有多种,这里对使用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");"方式获取,然后进行文件的上传等操作就行了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。