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

2024-04-04 17:55:42

需要的下载文件：

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.jb51.net/201701/yuanma/springmvc_jb51.rar

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

springmvc处理异步请求的示例

springmvc 3.2开始就支持servlet3.0的异步请求.平常我们请求一个controller一般都是同步的,如果在代码执行中,遇到耗时的业务操作,那servlet容器线程就会被锁死,当有其他请求进来的时候就会受堵了. springmvc3.2之后支持异步请求,能够在controller中返回一个Callable或者DeferredResult.当返回Callable的时候,大概的执行过程如下: 当controller返回值是Callable的时候,springmvc就会启动一个线程将
SpringMVC环境下实现的Ajax异步请求JSON格式数据

一环境搭建首先是常规的spring mvc环境搭建,不用多说,需要注意的是,这里需要引入jackson相关jar包,然后在spring配置文件"springmvc-servlet.xml"中添加json解析相关配置,我这里的完整代码如下: <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schem
SpringMVC使用MultipartFile 实现异步上传方法介绍

目的是实现异步上传 1.添加pom依赖添加pom依赖,因为用的ajax,数据需要转成json的格式进行传输,所以还有加入一个JSON jar包: <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fileupload</artifactId> <version>1.3.1</version> </dependency>
springmvc利用jquery.form插件异步上传文件示例

需要的下载文件: 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</ve
jquery uploadify和apache Fileupload实现异步上传文件示例

jQuery Uploadify + Apache Fileupload异步上传文件示例1.可以限制上传文件大小和类型,理论上任何类型的文件都可以上传(自己根据api配置即可):2.后台使用Apache commons-fileupload-1.3.1.jar作为上传工具包,本示例支持一次性多文件上传:3.文件上传目录可以任意指定,请在web.xml中配置:Uploadify api 详见http://www.uploadify.com/documentation/ FileUploadServ
jQuery.Form实现Ajax上传文件同时设置headers的方法

废话不多说了,关于jquery form实现ajax上传文件的方法,大家参考一下实例代码吧: <span style="font-family: Arial, Helvetica, sans-serif;">function ajaxSubmitForm() {</span> var option = { url : cache.batchImport, type : 'POST', dataType : 'json', headers : {"tok
jquery+ajax实现异步上传文件显示进度条

前言: 今天项目中加了一个上传文件加进度条的需求,我就搞了一下.时间宝贵不多说,直接进入正题. 异步上传文件是要用到ajax里的一个小的知识点:xhr(XML Http Request)一个对象,xhr对象也是ajax一个核心. 关于使用它也很简单:就四步(下面这样写也可以向后端进行发送请求) var xhr=new XMLHttpRequest()//创建xhr对象 xhr.open('请求方式','请求的地址') xhr.send()//发佛那个请求 xhr.onreadystatechan
jQuery.form插件的使用及跨域异步上传文件

先说明白这个跨域异步上传功能我们借助了Jquery.form插件,它在异步表单方面很有成效,而跨域我们会在HTTP响应头上添加 access-control-allow-method,当然这个头标记只有IE10,火狐和谷歌上支持,对于IE10以下的浏览器来说,我们就不能用这种方式了,我们需要换个思路去干这事,让服务端去重写向我们的客户端,由客户端(与文件上传页面在同域下)来返回相关数据即可. 再做事 1 Jquery.form的使用 <form method="post" ac
利用jQuery异步上传文件的插件用法详解

现在想实现用ajax来上传文件的功能,但是却发现Jquery自带的ajax方法只能上传文件名,而不能上传文件:用form提交虽然能够上传文件,但是却要刷新页面...多方查找下找到了一个可用的jQuery插件,刚好可以满足异步上传文件的要求. 代码 jquery.form.js 用法这个插件是基于表单提交的,我们只要正常的写一段提交文件的表单,如: <form id="myForm" action="comment.php" method="post
jQuery插件ajaxFileUpload异步上传文件

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能
jQuery异步上传文件插件ajaxFileUpload详细介绍

一.ajaxFileUpload是一个异步上传文件的jQuery插件. 传一个不知道什么版本的上来,以后不用到处找了. 语法:$.ajaxFileUpload([options]) options参数说明: 1.url 上传处理程序地址. 2,fileElementId 需要上传的文件域的ID,即<input type="file">的ID. 3,secureuri 是否启用安全提交,默认为false. 4,dataType 服务器返回的数据类型.可以为xml,sc
PHP结合jQuery插件ajaxFileUpload实现异步上传文件实例

平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了.后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件的效果.网上也有很多对ajaxFileUpload插件的使用的文章,不过我发现没有PHP版,所以这次服务器那边的处理就使用PHP语言来处理. 一.详解ajaxFileUpload插件的语法参数原理:ajaxfileupload是通过监听iframe的onload方
JQuery插件ajaxfileupload.js异步上传文件实例

在服务器端做文件上传的过程中,如果使用web服务器短端的上传控件去上传文件的话,会导致页面刷新一次,这样对用户的体验就不是很友好了.ajaxfileupload.js是一款jQuery的异步上传文件插件,使用简单且容易上手. 前置条件:ajaxfileupload.js文件,百度下载一个就行. JS引用: 复制代码代码如下: <script src="/Content/JQueryJS/jquery-2.1.1.js"></script> <script

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

相关推荐

随机推荐