欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

springmvc利用jquery.form插件异步上传文件示例

程序员文章站 2024-03-07 16:12:03
需要的下载文件： jquery.form.js jquery.js commons-fileupload.jar commons-io.jar...

需要的下载文件：

jquery.form.js

jquery.js

commons-fileupload.jar

commons-io.jar

示例图片

springmvc利用jquery.form插件异步上传文件示例

pom.xml

<!-- 文件上传 --> 
  <dependency> 
   <groupid>commons-fileupload</groupid> 
   <artifactid>commons-fileupload</artifactid> 
   <version>1.3</version> 
  </dependency> 
  <dependency> 
   <groupid>commons-io</groupid> 
   <artifactid>commons-io</artifactid> 
   <version>2.4</version> 
  </dependency>

web.xml 解决上传后中文文件名乱码问题

<!-- 解决提交时中文乱码问题 start --> 
 <filter> 
   <filter-name>set character encoding</filter-name> 
   <filter-class>org.springframework.web.filter.characterencodingfilter</filter-class> 
   <init-param> 
    <param-name>encoding</param-name> 
    <param-value>utf-8</param-value> 
   </init-param> 
 </filter> 
 <filter-mapping> 
  <filter-name>set character encoding</filter-name> 
  <url-pattern>/*</url-pattern> 
 </filter-mapping> 
 <!-- 解决提交时中文乱码问题 end -->

servlet-context.xml中添加对上传的支持

<!-- 支持文件上传 --> 
 <beans:bean id="multipartresolver" class="org.springframework.web.multipart.commons.commonsmultipartresolver"> 
 </beans:bean>

jsp文件

<%@ page language="java" import="java.util.*" pageencoding="utf-8" contenttype="text/html; charset=utf-8"%> 
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<% 
 string path = request.getcontextpath(); 
 string basepath = request.getscheme() + "://"+ request.getservername() + ":" + request.getserverport()+ path; 
%> 
<html lang="us"> 
<head> 
 <meta charset="utf-8"> 
 <title>springmvc上传文件</title> 
 <link type="text/css" href="<%=basepath%>/resources/css/jquery-ui/jquery-ui.css" rel="stylesheet" /> 
 <link href="<%=basepath%>/resources/themes/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> 
</head> 
<body> 
 <h2>springmvc上传文件</h2> 
 <br/> 
 
 
<br/> 
 <div class="alert alert-success" id="formsucc"></div> 
 <br/> 
   
 <form role="form" id="uploadform" name="uploadform" enctype="multipart/form-data"> 
  <div class="form-group"> 
    <label>项目名称</label> 
  </div> 
  <div class="form-group"> 
    <label> 
    <input class="form-control" maxlength="30" id="projectname" name="projectname"> 
    </label> 
  </div> 
  <div class="form-group"> 
    <label>file input</label> 
    <input type="file" name="file"> 
   </div> 
   
  <button class="btn" type="button" id="dosave">提交</button> 
   
 </form> 
 <div></div> 
</body> 
</html> 
 
 
<script type="text/javascript" src="<%=basepath%>/resources/js/jquery/jquery-1.11.3.min.js"></script> 
<script type="text/javascript" src="<%=basepath%>/resources/js/jquery-ui/jquery-ui.js"></script> 
<script type="text/javascript" src="<%=basepath%>/resources/js/jqueryform/jquery.form.js"></script> 
<script> 
 
$(function(){ 
 $("#formsucc").hide(); 
  
 $("#dosave").click(function(){ 
  var requesturl = "<%=basepath%>/widget/savefile.json"; 
  var projectname = $("#projectname").val(); 
  $("#uploadform").ajaxsubmit({ 
    type: 'post', 
    url: requesturl, 
    //data: {projectname: projectname}, //应该把这个去掉，要不然，值会有重复，因为form提交时已经做了一次提交了。 
                 //如果projectname的值为"tt",如果这个地方不去掉，那么提交接收的值变成"tt,tt"了。 
    contenttype: "application/x-www-form-urlencoded; charset=utf-8", 
    success: function(data) { 
    if(data.success){ 
     $(".infotips").remove(); 
     $("#formsucc").show(); 
     $("#formsucc").append("<label class='infotips'>"+data.message+"</label>"); 
    } 
    } 
  }); 
 }); 
  
}); 
 
 
 
</script>

java的controller文件

package com.paincupid.springmvc.widget.controller; 
 
import java.io.ioexception; 
import java.io.inputstream; 
import java.util.list; 
 
import javax.annotation.resource; 
import javax.servlet.http.httpservletrequest; 
 
import org.slf4j.logger; 
import org.slf4j.loggerfactory; 
import org.springframework.stereotype.controller; 
import org.springframework.web.bind.annotation.requestmapping; 
import org.springframework.web.bind.annotation.requestmethod; 
import org.springframework.web.bind.annotation.requestparam; 
import org.springframework.web.bind.annotation.responsebody; 
import org.springframework.web.multipart.multipartfile; 
 
import com.paincupid.springmvc.finance.domain.finance; 
import com.paincupid.springmvc.test.domain.person; 
import com.paincupid.springmvc.util.basejsonrst; 
import com.paincupid.springmvc.util.creatmockdata; 
 
/** 
 * 
 * @author arthur.paincupid.lee 
 * @since 2016.01.24 
 * 
 */ 
@controller 
@requestmapping("/widget") 
public class widgetcontroller { 
 private static final logger log = loggerfactory.getlogger(widgetcontroller.class); 
  
 /** 
  * 上传文件 
  * 在前台的访问路径为： http://localhost:8080/springmvc/widget/uploadfile/view 
  * @return 
  */ 
 @requestmapping("/uploadfile/view") 
 public string uploadfile() { 
  return "widget/uploadfile"; 
 } 
  
 @responsebody 
 @requestmapping(value="/savefile", method=requestmethod.post) 
 public basejsonrst savefile(@requestparam multipartfile file, 
   @requestparam string projectname) { 
  basejsonrst view = new basejsonrst(); 
  string orgiginalfilename = ""; 
  try { 
   string filename = file.getname(); 
   inputstream inputstream = file.getinputstream(); 
   string content = file.getcontenttype(); 
   orgiginalfilename = file.getoriginalfilename(); 
   log.info("filename: "+filename+", inputstream: "+ inputstream 
      +"\r\n content: "+content+", orgiginalfilename: ="+ orgiginalfilename 
      +"\r\n projectname: "+ projectname);  
  } catch (ioexception e) { 
   e.printstacktrace(); 
  } 
  view.setsuccess(true); 
  view.setmessage("上传: "+orgiginalfilename+" 文件成功！"); 
  return view; 
 } 
 
  
}

下载源码地址：

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

上一篇： Android 代码JIT友好度检测工具

下一篇： java 查找list中重复数据实例详解

推荐阅读