首页 > 编程 > Java > 正文

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

2019-11-26 13:10:18
字体:
来源:转载
供稿:网友

需要的下载文件:

jQuery.form.js

jquery.js

commons-fileupload.jar

commons-io.jar

示例图片

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;  }    } 

下载源码地址:http://xiazai.VeVB.COm/201701/yuanma/springmvc_jb51.rar

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

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