当前位置: 移动技术网 > IT编程>开发语言>Java > springmvc+ajax+formdata上传图片代码实例

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

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

女装品牌折扣,白岩松在江西财经大学的演讲,ci679航班

最近工作涉及到了上传图片的情况,在网上看了很多,就着重学习了下。上传文件的方式有多种,这里对使用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");"方式获取,然后进行文件的上传等操作就行了。

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

如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复

相关文章:

验证码:
移动技术网