10377人阅读
基于Ajax的文件上传要实现的功能要求，要在用户提交了上传按钮请求后，客户端其页面要显示文件上传进度条。
&&&&& 其整个功能时序图如图所示。
&简单的说，要实现在客户端显示进度条，需要做的是：当客户端提交上传文件请求后，服务器在上传文件的过程中，将上传进度情况保存到Session中，客户端周期性的发送请求来获取保存在Session中值，以获取上传文件的进度信息。
1.&新建web工程AjaxUpload。
2.&将commons-fileupload-1.2.1-bin.zip包中的commons-fileupload-1.2.1.jar文件和commons-io-1.4-bin.zip包中的commons-io-1.4.jar文件拷贝到web工程下的WEB-INF\lib目录下。
3.&由于本实例涉及到多个类，处理此类问题最好是给相应的类打包进行管理。在web工程src目录下新建一个包com.ncu.upload。
4.&服务器端实现。
首先要创建一个用来保存文件上传状态的类&FileUploadStatus。其源码如下：
package com.ncu.
import java.util.*;
public class FileUploadStatus {
//上传总量
private long uploadTotalSize=0;
//读取上传总量
private long readTotalSize=0;
//当前上传文件号
private int currentUploadFileNum=0;
//成功读取上传文件数
private int successUploadFileCount=0;
private String status=&&;
//处理起始时间
private long processStartTime=0l;
//处理终止时间
private long processEndTime=0l;
//处理执行时间
private long processRunningTime=0l;
//上传文件URL列表
private List uploadFileUrlList=new ArrayList();
//取消上传
private boolean cancel=
//上传base目录
private String baseDir=&&;
public String getBaseDir() {
return baseD
public void setBaseDir(String baseDir) {
this.baseDir = baseD
public boolean getCancel() {
public void setCancel(boolean cancel) {
this.cancel =
public List getUploadFileUrlList() {
return uploadFileUrlL
public void setUploadFileUrlList(List uploadFileUrlList) {
this.uploadFileUrlList = uploadFileUrlL
public long getProcessRunningTime() {
return processRunningT
public void setProcessRunningTime(long processRunningTime) {
this.processRunningTime = processRunningT
public long getProcessEndTime() {
return processEndT
public void setProcessEndTime(long processEndTime) {
this.processEndTime = processEndT
public long getProcessStartTime() {
return processStartT
public void setProcessStartTime(long processStartTime) {
this.processStartTime = processStartT
public long getReadTotalSize() {
return readTotalS
public void setReadTotalSize(long readTotalSize) {
this.readTotalSize = readTotalS
public int getSuccessUploadFileCount() {
return successUploadFileC
public void setSuccessUploadFileCount(int successUploadFileCount) {
this.successUploadFileCount = successUploadFileC
public int getCurrentUploadFileNum() {
return currentUploadFileN
public void setCurrentUploadFileNum(int currentUploadFileNum) {
this.currentUploadFileNum = currentUploadFileN
public String getStatus() {
public void setStatus(String status) {
this.status =
public long getUploadTotalSize() {
return uploadTotalS
public void setUploadTotalSize(long uploadTotalSize) {
this.uploadTotalSize = uploadTotalS
&由于要在客户端要显示进度条，所以在上传过程中服务器端需要监视和维护上传状态的信息，此过程需要处理的数据信息是：不断更新Session中保存的FileUploadStatus实例的信息，如：已经上传的字节数，上传文件的总大小等。FileUpload现在的1.2版本为监视上传进度提供了内建的支持，可以直接继承类ProgressListener，然后重载update()方法，在该方法中添加自己要处理的代码，最后在文件上传处理代码（后面会讲到）中通过为ServletFileUpload对象注册创建的监听类。监听类UploadListener的源代码如下：
package com.ncu.
import javax.servlet.http.HttpS
import mons.fileupload.ProgressL
public class UploadListener implements ProgressListener {
private HttpSession session=
public UploadListener (HttpSession session){
this.session=
* 更新状态
* @param pBytesRead 读取字节总数
* @param pContentLength 数据总长度
* @param pItems 当前正在被读取的field号
public void update(long pBytesRead, long pContentLength, int pItems) {
FileUploadStatus fuploadStatus = UploadServlet.takeOutFileUploadStatusBean(this.session);
fuploadStatus.setUploadTotalSize(pContentLength);
//读取完成
if (pContentLength == -1) {
fuploadStatus.setStatus(&完成对& + pItems + &个文件的读取：读取了 & + pBytesRead + &/&
+ pContentLength+ & bytes.&);
fuploadStatus.setReadTotalSize(pBytesRead);
fuploadStatus.setCurrentUploadFileNum(pItems);
fuploadStatus.setProcessEndTime(System.currentTimeMillis());
fuploadStatus.setProcessRunningTime(fuploadStatus.getProcessEndTime());
}else{//读取过程中
fuploadStatus.setStatus(&当前正在处理第& + pItems+&个文件:已经读取了 & + pBytesRead + & / & + pContentLength+ & bytes.&);
fuploadStatus.setReadTotalSize(pBytesRead);
fuploadStatus.setCurrentUploadFileNum(pItems);
fuploadStatus.setProcessRunningTime(System.currentTimeMillis());
//System.out.println(&已经读取：& + pBytesRead);
UploadServlet.storeFileUploadStatusBean(this.session, fuploadStatus);
有了前面两个类的基础，下来我们可以动手去实现真正处理整个操作Servlet类。源代码如下。
package com.ncu.
import java.io.*;
import java.util.L
import javax.servlet.ServletE
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpServletR
import javax.servlet.http.HttpS
import mons.fileupload.FileI
import mons.fileupload.FileUploadE
import mons.fileupload.disk.DiskFileItemF
import mons.fileupload.servlet.*;
* Servlet implementation class for Servlet: UploadServlet
public class UploadServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
static final long serialVersionUID = 1L;
public static final String UPLOAD_STATUS=&UPLOAD_STATUS&;
public static final String UPLOAD_DIR=&/upload&;
public UploadServlet() {
* 从文件路径中取出文件名
* @param filePath
private String takeOutFileName(String filePath){
int pos=filePath.lastIndexOf(File.separator);
if (pos&0){
return filePath.substring(pos+1);
return fileP
* 从request中取出FileUploadStatus Bean
* @param request
public static FileUploadStatus takeOutFileUploadStatusBean(HttpSession session){
Object obj=session.getAttribute(UPLOAD_STATUS);
if (obj!=null){
return (FileUploadStatus)
* 把FileUploadStatus Bean保存到session
* @param request
* @param uploadStatusBean
public static void storeFileUploadStatusBean(
HttpSession session,
FileUploadStatus uploadStatusBean){
session.setAttribute(UPLOAD_STATUS,uploadStatusBean);
* 删除已经上传的文件
* @param request
private void deleteUploadedFile(HttpServletRequest request){
FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
for(int i=0;i&fUploadStatus.getUploadFileUrlList().size();i++){
File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+
File.separator+fUploadStatus.getUploadFileUrlList().get(i));
uploadedFile.delete();
fUploadStatus.getUploadFileUrlList().clear();
fUploadStatus.setStatus(&删除已上传的文件&);
storeFileUploadStatusBean(request.getSession(),fUploadStatus);
* 上传过程中出错处理
* @param request
* @param errMsg
* @throws IOException
* @throws ServletException
private void uploadExceptionHandle(
HttpServletRequest request,
String errMsg) throws ServletException, IOException{
//首先删除已经上传的文件
deleteUploadedFile(request);
FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
fUploadStatus.setStatus(errMsg);
storeFileUploadStatusBean(request.getSession(),fUploadStatus);
* 初始化文件上传状态Bean
* @param request
private FileUploadStatus initFileUploadStatusBean(HttpServletRequest request){
FileUploadStatus fUploadStatus=new FileUploadStatus();
fUploadStatus.setStatus(&正在准备处理&);
fUploadStatus.setUploadTotalSize(request.getContentLength());
fUploadStatus.setProcessStartTime(System.currentTimeMillis());
fUploadStatus.setBaseDir(request.getContextPath()+UPLOAD_DIR);
return fUploadS
* 处理文件上传
* @param request
* @param response
* @throws IOException
* @throws ServletException
private void processFileUpload(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
DiskFileItemFactory factory = new DiskFileItemFactory();
//设置内存阀值，超过后写入临时文件
//factory.setSizeThreshold();
//设置临时文件存储位置
//factory.setRepository(new File(request.getRealPath(&/upload/temp&)));
ServletFileUpload upload = new ServletFileUpload(factory);
//设置单个文件的最大上传size
//upload.setFileSizeMax();
//设置整个request的最大size
//upload.setSizeMax();
//注册监听类
upload.setProgressListener(new UploadListener(request.getSession()));
//保存初始化后的FileUploadStatus Bean
storeFileUploadStatusBean(request.getSession(),initFileUploadStatusBean(request));
List items = upload.parseRequest(request);
//处理文件上传
for(int i=0;i&items.size();i++){
FileItem item=(FileItem)items.get(i);
//取消上传
if (takeOutFileUploadStatusBean(request.getSession()).getCancel()){
deleteUploadedFile(request);
//保存文件
else if (!item.isFormField() && item.getName().length()&0){
String fileName=takeOutFileName(item.getName());
File uploadedFile = new File(request.getRealPath(UPLOAD_DIR)+File.separator+fileName);
item.write(uploadedFile);
//更新上传文件列表
FileUploadStatus fUploadStatus=takeOutFileUploadStatusBean(request.getSession());
fUploadStatus.getUploadFileUrlList().add(fileName);
storeFileUploadStatusBean(request.getSession(),fUploadStatus);
Thread.sleep(500);
} catch (FileUploadException e) {
e.printStackTrace();
//uploadExceptionHandle(request,&上传文件时发生错误:&+e.getMessage());
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
//uploadExceptionHandle(request,&保存上传文件时发生错误:&+e.getMessage());
* 回应上传状态查询
* @param request
* @param response
* @throws IOException
private void responseFileUploadStatusPoll(HttpServletRequest request,HttpServletResponse response) throws IOException{
FileUploadStatus fUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
//计算上传完成的百分比
long percentComplete = (long)Math.floor(((double) fUploadStatus.getReadTotalSize()/(double) fUploadStatus.getUploadTotalSize())*100.0);
System.out.println(&com:&+percentComplete);
response.setContentType(&text/xml&);
response.setCharacterEncoding(&UTF-8&);
response.setHeader(&Cache-Control&, &no-cache&);
if ( ((long)fUploadStatus.getReadTotalSize() == (long)fUploadStatus.getUploadTotalSize()) || (fUploadStatus.getCancel() == true)){
response.getWriter().write(fUploadStatus.getStatus().toString()+&success&);
response.getWriter().write(fUploadStatus.getStatus().toString()+&&div class=\&prog-border\&&&div class=\&prog-bar\& style=\&width: &
+ percentComplete + &%;\&&&/div&&/div&&);
* 处理取消文件上传
* @param request
* @param response
* @throws IOException
private void processCancelFileUpload(HttpServletRequest request,HttpServletResponse response) throws IOException{
FileUploadStatus fUploadStatus=(FileUploadStatus)request.getSession().getAttribute(UPLOAD_STATUS);
fUploadStatus.setCancel(true);
request.getSession().setAttribute(UPLOAD_STATUS, fUploadStatus);
responseFileUploadStatusPoll(request,response);
* 在上传文件列表中查找与文件名相关的id
* @param request
* @param fileName 文件名
* @return　找到返回id,否则返回-1
private int findFileIdInFileUploadedList(HttpServletRequest request,String fileName){
FileUploadStatus fileUploadStatus=takeOutFileUploadStatusBean(request.getSession());
for(int i=0;i&fileUploadStatus.getUploadFileUrlList().size();i++){
if (fileName.equals((String)fileUploadStatus.getUploadFileUrlList().get(i))){
return -1;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
boolean isMultipart = ServletFileUpload.isMultipartContent(request);
if (isMultipart) {
processFileUpload(request,response);
request.setCharacterEncoding(&UTF-8&);
if (request.getParameter(&uploadStatus&)!=null){
responseFileUploadStatusPoll(request,response);
if (request.getParameter(&cancelUpload&)!=null){
processCancelFileUpload(request,response);
至此，服务器端的代码已经基本完成。
5.&客户端实现
由于在上传文件时需要在同一页面显示对应的进度条控件，因此，在提交表单时当前页面不能被刷新。我们可以通过将表单提交至一个隐藏的&iframe&中来实现。关于Ajax的技术前面讲过，这里就不再细说，直接给出源代码如下：
&!DOCTYPE html PUBLIC &-//W3C//DTD HTML 4.01 Transitional//EN& &http://www.w3.org/TR/html4/loose.dtd&&
&meta http-equiv=&Content-Type& content=&text/ charset=UTF-8&&
&title&基于Ajax的上传文件显示进度条&/title&
.prog-border {
height: 15
width: 205
background: #
border: 1px solid #000;
margin: 0;
padding: 0;
.prog-bar {
height: 11
padding: 0
background: #178399;
font-size: 10
font-family: Arial, Helvetica, sans-
font-size: 10
&script language=&javascript& type=&text/javascript&&
//var userName=document.getElementById(&userName&).
//创建跨浏览器的XMLHttpRequest对象
function startListener(){
xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');
}catch(e){
//IE 5.5 及更高版本
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
//其他浏览器
xmlhttp = new XMLHttpRequest();
}catch(e){}
var progressStatusText = document.getElementById(&progressBar&);
xmlhttp.open(&get&,&UploadServlet?uploadStatus=true&,true);
/**此处Header设置非常重要，必须设置Content-type类型，负责会报错误
xmlhttp.setRequestHeader(&Content-type&, &application/x-www-form-urlencoded&);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
progressStatusText.innerHTML = &&;
progressStatusText.innerHTML = xmlhttp.responseT
var temp = xmlhttp.responseText.indexOf(&success&);
temp & 0 ){
window.clearTimeout(timer);
timer = window.setTimeout(startListener,1000);
xmlhttp.send(null);
function startUpload(){
timer = window.setTimeout(startListener,1000);
function cancelUpload(){
xmlhttp = new ActiveXObject('Msxm12.XMLHTTP');
}catch(e){
//IE 5.5 及更高版本
xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
//其他浏览器
xmlhttp = new XMLHttpRequest();
}catch(e){}
var progressStatusText = document.getElementById(&progressBar&);
xmlhttp.open(&get&,&UploadServlet?cancelUpload=true&,true);
xmlhttp.setRequestHeader(&Content-type&, &application/x-www-form-urlencoded&);
//xmlhttp.setRequestHeader(&Content-type&, &multipart/form-data&);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
if(xmlhttp.status == 200){
progressStatusText.innerHTML = &&;
progressStatusText.innerHTML = xmlhttp.responseT
xmlhttp.send(null);
&div id=&controlPanel&&
&!-- 这个是隐藏的&iframe&作为表单提交后处理的后台目标
通过表单form的target属性指定该&iframe&将返回信息显示在&iframe&框架中
&iframe id='target_upload' name='target_upload' src='' style='display: none'&&/iframe&
&form id=&fileUploadForm& name=&fileUploadForm& action=&UploadServlet&
enctype=&multipart/form-data& method=&post& onsubmit=&return startUpload();& target=&target_upload&&
&input type=&file& name=&file& id=&file& size=&40&/&&br&
&input type=&submit& name=&uploadButton& id=&uploadButton& value=&开始上传&/&
&input type=&button& name=&cancelUploadButton& id=&cancelUploadButton& value=&取消上传& onclick=&return cancelUpload();&/&&br&
&div id=&progressBar&&
&至此，整个文件上传的实现到此完成，读者可以在此基础上，发挥自己的创新能力，去完善此实例。
Good Luck!
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：60460次
排名：千里之外
转载：29篇
评论：21条
(3)(18)(1)(2)(6)(2)Springmvc+uploadify实现文件带进度条批量上传_Java教程_
Springmvc+uploadify实现文件带进度条批量上传
来源：人气：1366
&网上看了很多关于文件上传的帖子，众口不一，感觉有点乱，最近正好公司的项目里用到JQuery的uploadify控件做文件上传，所以整理下头绪，搞篇文档出来，供亲们分享。&
&& Uploadify控件的主要优势是可以实现批量文件上传，并且提供了onSelect（选中文件）、onUploadSuccess（上传成功回调函数）等多个事件监听函数，可以操控上传的整个流程。
&& 对uploadify有个简单的了解后，废话不多说，开始吧...
(由于这次项目中用到的是ssm框架，所以就以singmvc的后台处理为例)。
一、在工程中导入uploadify
1、首先，下载uploadify包文件
Uploadify官网&：下载地址&&&a&/&/a&
2、解压包文件，得到如下结构：
background.jpg&&&是上传框的背景图片
jquery.uploadify.min.js&&&迷你版的uploadify&js文件，主要功能就靠它了
jquery-1.9.1.js&&&都懂得，版本没啥要求
uploadify.&&&&上传的美化文件
uploadify.swf&&&&上传时的动态效果，进度条等
Uploadify-cancel.png&&&取消上传按钮图片
3、将uplodify文件夹放到webapp下
4、导入必须的jar包
commons-fileupload-1.3.1.jar&&
commons-io-2.2.jar
使用maven时pom.中添加如下依赖即可：
&dependency&&&
&&&&&&&&&&&&&groupId&commons-fileupload&/groupId&&&
&&&&&&&&&&&&&artifactId&commons-fileupload&/artifactId&&&
&&&&&&&&&&&&&version&1.3.1&/version&&&
&/dependency& &
5、在springmvc.xml文件中加入multart&的解析器
Java代码&&
id="multipartResolver"&&class="org.springframework.monsMultipartResolver"&&&
&property&name="maxUploadSize"&value="1024000"&&/property&&&
&property&name="defaultEncoding"&value="utf-8"/&&!--属性：编码--&&&
&：这个必须配置，一会在controller里抓取上传文件时要用。否则会报错。
二、在需要做上传的页面中配置
6、在页头导入
7、在页面中需要上传附件的位置插入
Java代码&&
&div&id="uploadfileQueue"&&/div&&//存放选择文件的&图片按钮的&Div&&
&input&type="file"&id="file_upload"&&&
&input&type="button"&value="上传"&&
&onclick=":$('#file_upload').uplodify('upload','*')"&&&&
&input&type="button"&value="取消上传"&&
&onclick="javascript:$('#file_upload').uplodify('cancel','*')"&&&&
&&&&（固定写法）&&
8、js中设置
&script&type="text/javascript"&&&
$(document).ready(function()&{&&
&&&&$("#file_upload").uploadify({&&
&&&&&&&&//是否自动上传&true&or&false&&
&&&&&&&&'auto':false,&&
&&&&&&&&//超时时间上传成功后，将等待服务器的响应时间。&&
&&&&&&&&//在此时间后，若服务器未响应，则默认为成功(因为已经上传,等待服务器的响应)&单位：秒&&
&&&&&&&&'successTimeout':99999,&&
&&&&&&&&//附带值&JSON对象数据，将与每个文件一起发送至服务器端。&&
&&&&&&&&//如果为动态值，请在onUploadStart()中使用settings()方法更改该JSON值&&
&&&&&&&'formData':{&&&&&&&//可以不写&&
&&&&&&&&&&&'user.username':'',&&
&&&&&&&&&&&'user.age':''&&
&&&&&&&&&&&},&&&&
&&&&&&&&&&&&'onUploadStart':&function(file)&{&&&
&&&&&&&&&&&&&&&&var&name=$('#username').val();&&
&&&&&&&&&&&&&&&&var&age=$('#age').val();&&
&&&&&&&&&&&&&&&&$("#file_upload").uploadify(&&
&&&&&&&&&&&&&&&&"settings",&&&
&&&&&&&&&&&&&&&&"formData",&&&
&&&&&&&&&&&&&&&&{'user.username':name,'user.age':age});&&
&&&&&&&&&&&&&&&&},&&&
&&&&&&&&//&&
&&&&&&&&'swf':&"${pageContext.request.contextPath}/uplodify/uploadify.swf",&&
&&&&&&&&&//文件选择后的容器div的id值&&&
&&&&&&&&'queueID':'uploadfileQueue',&&
&&&&&&&&&//将要上传的文件对象的名称&必须与后台controller中抓取的文件名保持一致&&&&&&
&&&&&&&&'fileObjName':'pic',&&
&&&&&&&&//上传地址&&
&&&&&&&'uploader':'${pageContext.request.contextPath}/upload/uploadFile',&&
&&&&&&&&//浏览将要上传文件按钮的背景图片路径&&
&&&&&&&&'buttonImage':'${pageContext.request.contextPath}/uplodify/background.jpg',&&
&&&&&&&&//浏览按钮的宽度&&
&&&&&&&&'width':'100',&&
&&&&&&&&//浏览按钮的高度&&
&&&&&&&&'height':'32',&&
&&&&&&&&//在浏览窗口底部的文件类型下拉菜单中显示的文本&&
&&&&&&&&'fileTypeDesc':'支持的格式：',&&
&&&&&&&&//允许上传的文件后缀&&
&&&&&&&&'fileTypeExts':'*.*.*.*.png',&有哪些？？&&
&&&&&&&&/*上传文件的大小限制允许上传文件的最大&大小。&这个值可以是一个数字或字&符串。&
&&&&&&&&&&如果它是一个字符串，它接受一个单位(B,&KB,&MB,&or&GB)。&
&&&&&&&&&&默认单位为KB您可以将此值设置为0&，没有限制,&&
&&&&&&&&&&单个文件不允许超过所设置的值&如果超过&onSelectError时间被触发*/&&
&&&&&&&&'fileSizeLimit':'100KB',&&
&&&&&&&&//允许上传的文件的最大数量。当达到或超过这个数字，onSelectError事件被触发。&&
&&&&&&&&'queueSizeLimit'&:&3,&&
&&&&&&&&//选择上传文件后调用&&
&&&&&&&&'onSelect'&:&function(file)&{&&
&&&&&&&&&&&&&&//alert("123");&&&&&&
&&&&&&&&},&&
&&&&&&&&//返回一个错误，选择文件的时候触发&&
&&&&&&&&'onSelectError':function(file,&errorCode,&errorMsg){&&
&&&&&&&&&&&&switch(errorCode)&{&&
&&&&&&&&&&&&&&&&case&-100:&&
&&&&&&&&&&&&&&&&&&&&alert("上传的文件数量已经超出系统限制的"&&
&&&&&&&&&&&&&&&&&&&&&+$('#file_upload').uploadify('settings','queueSizeLimit')+"个文件！");&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&case&-110:&&
&&&&&&&&&&&&&&&&&&&&alert("文件&["+file.name+"]&大小超出系统限制的"&&
&&&&&&&&&&&&&&&&&&&&&+$('#file_upload').uploadify('settings','fileSizeLimit')+"大小！");&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&case&-120:&&
&&&&&&&&&&&&&&&&&&&&alert("文件&["+file.name+"]&大小异常！");&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&&&&&case&-130:&&
&&&&&&&&&&&&&&&&&&&&alert("文件&["+file.name+"]&类型不正确！");&&
&&&&&&&&&&&&&&&&&&&&&&
&&&&&&&&&&&&}&&
&&&&&&&&},&&
&&&&&&&&//上传到服务器，服务器返回相应信息到data里&&
&&&&&&&&'onUploadSuccess':function(file,&data,&response){&&
&&&&&&&&&&&&alert("上传成功");&&
&&&&&&&&},&&
&&&&&&//当单个文件上传出错时触发&&
&&&&&&&&'onUploadError':&function&(file,&errorCode,&errorMsg,&errorString)&{&&&
&&&&&&&&&&&&alert("上传失败");&&
&&&&&&&&&&&&}&&&
&/script& &
9、在controller中，实现上传
Java代码&&
//接收上传文件&&
@RequestMapping(value="uploadFile",method=RequestMethod.POST,produces="text/charset=utf-8")&&
@ResponseBody&&
public&String&uploadFile(@RequestParam("pic")CommonsMultipartFile&pic,HttpServletRequest&req,HttpServletResponse&response)&throws&IOException{&&
//设置文件保存的本地路径&&
String&filePath&=&req.get().getServletContext().getRealPath("/uploadFiles/");&&
String&fileName&=&pic.getOriginalFilename();&&
String&fileType&=&fileName.split("[.]")[1];&&
//为了避免文件名重复，在文件名前加UUID&&
String&uuid&=&UUID.randomUUID().toString().replace("-","");&&
String&uuidFileName&=&uuid&+&fileN&&
File&f&=&new&File(filePath+"/"+uuid+"."+fileType);&&
//将文件保存到服务器&&
FileUtil.upFile(pic.getInputStream(),&uuidFileName,&filePath);&&
return&uuidFileN&&
这个过程中要用到FileUtil工具类：
Java代码&&
package&com.baidu.&&
import&java.io.BufferedInputS&&
import&java.io.BufferedOutputS&&
import&java.io.F&&
import&java.io.FileInputS&&
import&java.io.FileOutputS&&
import&java.io.IOE&&
import&java.io.InputS&&
import&java.io.OutputS&&
import&java.util.L&&
import&java.util.zip.ZipE&&
import&java.util.zip.ZipOutputS&&
import&javax.servlet.http.HttpServletR&&
import&javax.servlet.http.HttpServletR&&
public&class&FileUtil&{&&
&*&单个文件上传&
&*&@param&is&
&*&@param&fileName&
&*&@param&filePath&
public&static&void&upFile(InputStream&is,String&fileName,String&filePath){&&
FileOutputStream&fos&=&&&
BufferedOutputStream&bos&=&&&
BufferedInputStream&bis&=&&&
File&file&=&new&File(filePath);&&
if(!file.exists()){&&
file.mkdirs();&&
File&f&=&new&File(filePath+"/"+fileName);&&
bis&=&new&BufferedInputStream(is);&&
fos&=&new&FileOutputStream(f);&&
bos&=&new&BufferedOutputStream(fos);&&
byte[]&bt&=&new&byte[4096];&&
while((len&=&bis.read(bt))&0){&&
bos.write(bt,&0,&len);&&
}&catch&(Exception&e)&{&&
e.printStackTrace();&&
}finally&{&&
if(null&!=&bos){&&
bos.close();&&
if(null&!=&fos){&&
fos.close();&&
if(null&!=&is){&&
is.close();&&
if&(null&!=&bis)&{&&
bis.close();&&
}&catch&(Exception&e)&{&&
e.printStackTrace();&&
10、效果图
1、多文件的上传其实是多次调用单文件上传的方法，我们看到的批量上传其实是分步执行的，上传一次调用一次单文件上传的方法，不要被假象迷惑。
2、上传成功后可以返回文件的信息，在onUploadSuccess函数中可以获取到，这样就可以在页面上设置一个隐藏域存放返回来的值，比如说文件的id，多文件的话可以在隐藏域中抓取数组。然后随表单提交，更新表数据，这样就能方便的把上传文件的信息添加到表中。下载地址&
3、有的朋友问，上传的东西在服务器中，项目重启就会丢失，怎么办，其实这个在真实项目中会做专门处理，不需要考虑。
优质网站模板