2799人阅读
Java（119）
文件上传/下载（8）
&&&&&&& 项目框架采用spring+hibernate+springMVC如果上传文件不想使用flash那么你可以采用html5;截图前段模块是bootstarp框架;不废话直接来代码;spring-mvc配置文件;效果截图如下:
&&&&&& &详细实现如下:
1、mvc-config.xml
&?xml version=&1.0& encoding=&UTF-8&?&
&beans xmlns=&http://www.springframework.org/schema/beans&
xmlns:xsi=&http://www.w3.org/2001/XMLSchema-instance&
xmlns:context=&http://www.springframework.org/schema/context&
xmlns:mvc=&http://www.springframework.org/schema/mvc&
xsi:schemaLocation=&http://www.springframework.org/schema/beans
http://www.springframework.org/schema/beans/spring-beans.xsd
http://www.springframework.org/schema/context
http://www.springframework.org/schema/context/spring-context-3.2.xsd
http://www.springframework.org/schema/mvc
http://www.springframework.org/schema/mvc/spring-mvc-3.2.xsd&&
&!-- 注解扫描包 --&
&context:component-scan base-package=&com.yunfang.banks.controllers& /&
&!-- 开启注解 --&
&mvc:annotation-driven /&
&!-- 不拦截静态资源 --&
&mvc:default-servlet-handler /&
&mvc:interceptors&
&mvc:interceptor&
&mvc:mapping path=&/js/& /&
&mvc:mapping path=&/js/**& /&
&bean class=&com.yunfang.banks.intreceptor.MyInterceptor&&&/bean&
&/mvc:interceptor&
&/mvc:interceptors&
&mvc:interceptors&
&bean class=&com.yunfang.banks.intreceptor.MyInterceptor&&&/bean&
&/mvc:interceptors&
&!-- 静态资源(js/image)的访问 --&
&mvc:resources location=&/js/& mapping=&/js/**& /&
&!-- 定义视图解析器 --&
&bean id=&viewResolver&
class=&org.springframework.web.servlet.view.InternalResourceViewResolver&&
&property name=&prefix& value=&/&&&/property&
&property name=&suffix& value=&&&&/property&
&bean class=&org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter&&
&property name=&messageConverters&&
&!--下载的时候专用 --&
class=&org.springframework.http.converter.ByteArrayHttpMessageConverter& /&
&bean id=&jsonHttpMessageConverter&
class=&org.springframework.http.converter.json.MappingJacksonHttpMessageConverter&&
&property name=&supportedMediaTypes&&
&value&text/charset=UTF-8&/value&
&/property&
&/property&
&!-- 配置springMVC处理上传文件的信息,自定义上传,带进度条 --&
&bean id=&multipartResolver& class=&com.yunfang.banks.listener.CustomMultipartResolver&&
&property name=&defaultEncoding& value=&utf-8& /&
&property name=&maxUploadSize& value=&& /&
&bean id=&multipartResolver&
class=&org.springframework.monsMultipartResolver&&
&property name=&defaultEncoding& value=&utf-8& /&
&property name=&maxUploadSize& value=&& /&
&property name=&maxInMemorySize& value=&40960& /&
2、实体工具类：Progress.java
package com.yunfang.banks.
public class Progress {
private long pBytesR
private long pContentL
private long pI
public long getpBytesRead() {
return pBytesR
public void setpBytesRead(long pBytesRead) {
this.pBytesRead = pBytesR
public long getpContentLength() {
return pContentL
public void setpContentLength(long pContentLength) {
this.pContentLength = pContentL
public long getpItems() {
public void setpItems(long pItems) {
this.pItems = pI
public String toString() {
return &Progress [pBytesRead=& + pBytesRead + &, pContentLength=&
+ pContentLength + &, pItems=& + pItems + &]&;
3、文件上传进度监听类：FileUploadProgressListener.java
package com.yunfang.banks.
import javax.servlet.http.HttpS
import mons.fileupload.ProgressL
import org.
@Component
public class FileUploadProgressListener implements ProgressListener {
private HttpS
public void setSession(HttpSession session){
this.session=
Progress status = new Progress();//保存上传状态
session.setAttribute(&status&, status);
public void update(long pBytesRead, long pContentLength, int pItems) {
Progress status = (Progress) session.getAttribute(&status&);
Thread.sleep(5);
} catch (InterruptedException e) {
e.printStackTrace();
status.setpBytesRead(pBytesRead);
status.setpContentLength(pContentLength);
status.setpItems(pItems);
//System.out.println(&&&&&&&&&&&&&&&&&&&&&&+status);
4、自定义扩展org.springframework.monsMultipartResolver类，重写public MultipartParsingResult parseRequest(HttpServletRequest request) throws MultipartException方法：CustomMultipartResolver.java
package com.yunfang.banks.
import java.util.L
import javax.servlet.http.HttpServletR
import mons.fileupload.servlet.ServletFileU
import mons.fileupload.FileI
import mons.fileupload.FileU
import mons.fileupload.FileUploadB
import mons.fileupload.FileUploadE
import org.springframework.beans.factory.annotation.A
import org.springframework.web.multipart.MaxUploadSizeExceededE
import org.springframework.web.multipart.MultipartE
import org.springframework.monsMultipartR
public class CustomMultipartResolver extends CommonsMultipartResolver {
@Autowired
private FileUploadProgressListener progressL
public void setFileUploadProgressListener(
FileUploadProgressListener progressListener) {
this.progressListener = progressL
@SuppressWarnings(&unchecked&)
public MultipartParsingResult parseRequest(HttpServletRequest request)
throws MultipartException {
String encoding = determineEncoding(request);
FileUpload fileUpload = prepareFileUpload(encoding);
progressListener.setSession(request.getSession());
fileUpload.setProgressListener(progressListener);
List&FileItem& fileItems = ((ServletFileUpload) fileUpload).parseRequest(request);
return parseFileItems(fileItems, encoding);
catch (FileUploadBase.SizeLimitExceededException ex) {
throw new MaxUploadSizeExceededException(fileUpload.getSizeMax(), ex);
catch (FileUploadException ex) {
throw new MultipartException(&Could not parse multipart servlet request&, ex);
5、uploadController.java
@RequestMapping(&UserControllers/progress&)
public void uploadFile(HttpServletRequest request,HttpServletResponse response,
@RequestParam(&file&) CommonsMultipartFile file) throws IOException {
response.setContentType(&text/html&);
response.setCharacterEncoding(&GBK&);
boolean flag =
if (file.getSize() & 0) {
//文件上传的位置可以自定义
flag = FileUploadUtil.upLoadFile(file, request);
out = response.getWriter();
if (flag == true) {
out.print(&1&);
out.print(&2&);
6、FileUploadUtil.java
import java.io.F
import javax.servlet.http.HttpServletR
import org.springframework.web.multipart.MultipartF
public class FileUploadUtil {
public static Boolean uploadFile(HttpServletRequest request, MultipartFile file) {
System.out.println(&开始&);
String path = request.getSession().getServletContext().getRealPath(&upload&);
String fileName = file.getOriginalFilename();
System.out.println(path);
File targetFile = new File(path, fileName);
if (!targetFile.exists()) {
targetFile.mkdirs();
file.transferTo(targetFile);
} catch (Exception e) {
e.printStackTrace();
7、前台页面
&%@ page language=&java& import=&java.util.*& pageEncoding=&Utf-8&%&
String path = request.getContextPath();
String basePath = request.getScheme() + &://&
+ request.getServerName() + &:& + request.getServerPort()
+ path + &/&;
&!DOCTYPE html&
&base href=&&%=basePath%&&&
&meta http-equiv=&pragma& content=&no-cache&&
&meta http-equiv=&cache-control& content=&no-cache&&
&meta http-equiv=&expires& content=&0&&
&meta http-equiv=&keywords& content=&keyword1,keyword2,keyword3&&
&meta http-equiv=&description& content=&This is my page&&
&link rel=&stylesheet& type=&text/css& href=&styles.css&&
&link href=&css/bootstrap.min.css& rel=&stylesheet&&
&style type=&text/css&&
.file-box {
width: 340px
height: 22
border: 1px solid #
width: 180
vertical-align:
margin: 0;
padding: 0
border: 1px solid #CDCDCD;
height: 24
vertical-align:
margin: 0;
padding: 0
height: 24
filter: alpha(opacity :
opacity: 0;
width: 260
vertical-align:
margin: 0;
padding: 0
&%--&script type=&text/javascript&&
function myInterval()
$(&#progress&).html(&&);
type: &POST&,
url: &&%=basePath%&UserControllers/getSessions&,
data : &1=1&,
dataType : &text&,
success : function(msg) {
var data =
console.log(data);
$(&#pdiv&).css(&width&, data + &%&);
$(&#progress&).html(data + &%&);
function autTime() {
setInterval(&myInterval()&, 200);//1000为1秒钟
&script type=&text/javascript&&
function UpladFile() {
var fileObj = document.getElementById(&file&).files[0]; // js 获取文件对象
var FileController = &UserControllers/progress&; // 接收上传文件的后台地址
// FormData 对象---进行无刷新上传
var form = new FormData();
form.append(&author&, &hooyes&); // 可以增加表单数据
form.append(&file&, fileObj); // 文件对象
// XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
xhr.open(&post&, FileController, true);
xhr.onload = function() {
alert(&上传完成!&);
//$('#myModal').modal('hide');
//监听progress事件
xhr.upload.addEventListener(&progress&, progressFunction, false);
xhr.send(form);
function progressFunction(evt) {
var progressBar = document.getElementById(&progressBar&);
var percentageDiv = document.getElementById(&percentage&);
if (evt.lengthComputable) {
progressBar.max = evt.
progressBar.value = evt.
percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100)
&body style=&width: 80%;height: 80%;margin: 0&&
&div class=&row bootstrap-admin-no-edges-padding&&
&div class=&col-md-12&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&div class=&text-muted bootstrap-admin-box-title&&文件管理&/div&
&div class=&bootstrap-admin-panel-content&&
&button class=&btn btn-primary btn-lg& data-toggle=&modal&
data-target=&#myModal&&上传&/button&
&input type=&text& id=&test&&
&!-- 模态框（Modal） --&
&div class=&modal fade& id=&myModal& tabindex=&-1& role=&dialog&
aria-labelledby=&myModalLabel& aria-hidden=&true&&
&div class=&modal-dialog&&
&div class=&modal-content&&
&div class=&modal-header&&
&button type=&button& class=&close& data-dismiss=&modal&
aria-hidden=&true&&×&/button&
&h4 class=&modal-title& id=&myModalLabel&&文件上传进度&/h4&
&div class=&modal-body&&
&progress id=&progressBar& value=&0& max=&100&
style=&width: 100%;height: 20 && &/progress&
&span id=&percentage& style=&color:&&&/span& &br&
&div class=&file-box&&
&input type='text' name='textfield' id='textfield' class='txt' /&
&input type='button' class='btn' value='浏览...' /& &input
type=&file& name=&file& class=&file& id=&file& size=&28&
onchange=&document.getElementById('textfield').value=this.value& /&
&input type=&submit& name=&submit& class=&btn& value=&上传&
onclick=&UpladFile()& /&
&div class=&modal-footer&&
&button type=&button& class=&btn btn-default& data-dismiss=&modal&&关闭
&!-- /.modal-content --&
&!-- /.modal --&
&script type=&text/javascript&
src=&/jquery-2.0.3.min.js&&&/script&
&script src=&js/bootstrap.min.js&&&/script&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：468670次
积分：7157
积分：7157
排名：第2656名
原创：134篇
转载：711篇
译文：30篇
评论：74条
(25)(48)(39)(53)(3)(96)(74)(39)(64)(71)(57)(154)(132)(14)(2)(3)(3)(16)(2)(2)(1)欢迎关注课栈公众号
400-002-9691
"这篇文章主要介绍了基于Ajax技术实现文件上传带进度条的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下。1.概述在实际的Web应该开发或网站开发过程中，经常需要实现文件上传的功能。在文件上传过程中，经常需要用户进行长时间的等待，为了让用户及时了解上传进度，可以在上传文件的同时，显示文件的上传进度条。运行本实例，如图1所示，访问文件上传页面，单击“浏览”按钮选择要上传的文件，注意文件不能超过50MB，否则系统将给出错误提示。选择完要上传的文件后，单击“提交”按钮，将会上传文件并显示上传进度。2.技术要点主要是应用开源的Common-FileUpload组件来实现分段文件上传，从而实现在上传过程中，不断获取上传进度。下面对Common-FileUpload组件进行详细介绍。Common-FileUpload组件时Apache组织下的jakarta-commons项目下的一个子项目，该组件可以方便地将multipart/form-data类型请求中的各种表单域解析出来。该组件需要另一个名为Common-IO的组件的支持。这两个组件包文件可以到http://commons.apache.org网站上进行下载。（1）创建上传对象在应该Common-FileUpload组件实现文件上传时，需要创建一个工厂对象，并根据该工厂对象创建一个新的文件上传对象，具体代码如下：DiskFileItemFactory factory = new DiskFileItemFactory();ServletFileUpload upload = new ServletFileUpload(factory);（2）解析上传请求创建一个文件上传对象后，就可以应用该对象来解析上传请求，获取全部的表单项，可以通过文件上传对象的parseRequest()方法来实现。parseRequest()方法的语法结构如下：public List parseRequest(HttpServletRequest request) throws FileUploadException（3）FileItem类在Common-FileUpload组件中，无论是文件域还是普通表单域，都当成FileItem对象来处理。如果该对象的isFormField()方法返回值为true，则表示是一个普通表单域，否则为一个文件域。在实现文件上传时，可以通过FileItem类的getName()方法获得上传文件的文件名，通过getSize()方法获得上传文件的大小。3.具体实现（1）创建request.js文件，在该文件中编写Ajax请求方法。（2）新建文件上传页index.jsp，在该页中添加用于获得上传文件信息的表单以及表单元素，并添加用于显示进度条的&div&标签和显示百分比的&span&标签，关键代码如下：&form enctype=&multipart/form-data& method=&post& action=&UpLoad?action=uploadFile&&请选择上传的文件：&input name=&file& type=&file& size=&34&&注：文件大小请控制在50M以内。&div id=&progressBar& class=&prog_border& align=&left&&&img src=&images/progressBar.gif& width=&0& height=&13& id=&imgProgress&&&/div&&span id=&progressPercent& style=&width:40display:none&&0%&/span&&input name=&Submit& type=&button& value=&提交& onClick=&deal(this.form)&&&input name=&Reset& type=&reset& class=&btn_grey& value=&重置&&&/td&&/form&（3）新建上传文件的Servlet实现类UpLpad。在该类中编写实现文件上传的方法uploadFile()，在该方法中通过Common-FileUpload组件实现分段上传文件，并计算上传百分比，实时保存到Session中，关键代码如下：public void uploadFile(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {response.setContentType(&text/charset=GBK&);request.setCharacterEncoding(&GBK&);HttpSession session=request.getSession();session.setAttribute(&progressBar&,0); //定义指定上传进度的Session变量String error = &&;int maxSize=50*; //单个上传文件大小的上限DiskFileItemFactory factory = new DiskFileItemFactory(); //创建工厂对象ServletFileUpload upload = new ServletFileUpload(factory); //创建一个新的文件上传对象try {List items = upload.parseRequest(request); // 解析上传请求Iterator itr = items.iterator(); // 枚举方法while (itr.hasNext()) {FileItem item = (FileItem) itr.next(); //获取FileItem对象if (!item.isFormField()) { // 判断是否为文件域if (item.getName() != null && !item.getName().equals(&&)) {//是否选择了文件long upFileSize=item.getSize(); //上传文件的大小String fileName=item.getName(); //获取文件名if(upFileSize&maxSize){error=&您上传的文件太大，请选择不超过50M的文件&;}// 此时文件暂存在服务器的内存中File tempFile = new File(fileName); //构造文件目录临时对象String uploadPath = this.getServletContext().getRealPath(&/upload&);File file = new File(uploadPath,tempFile.getName());&InputStream is=item.getInputStream();int buffer=1024; //定义缓冲区的大小int length=0;byte[] b=new byte[buffer];double percent=0;FileOutputStream fos=new FileOutputStream(file);while((length=is.read(b))!=-1){percent+=length/(double)upFileSize*100D; //计算上传文件的百分比fos.write(b,0,length); //向文件输出流写读取的数据session.setAttribute(&progressBar&,Math.round(percent));&}fos.close();Thread.sleep(1000); //线程休眠1秒} else {error=&没有选择上传文件！&;}}}} catch (Exception e) {e.printStackTrace();error = &上传文件出现错误：& + e.getMessage();}if (!&&.equals(error)) {request.setAttribute(&error&, error);request.getRequestDispatcher(&error.jsp&).forward(request, response);}else {request.setAttribute(&result&, &文件上传成功！&);request.getRequestDispatcher(&upFile_deal.jsp&).forward(request, response);}}（4）在文件上传页index.jsp中，导入编写的Ajax请求方法的request.js文件，并编写获取上传进度的Ajax请求方法和Ajax回调函数，关键代码如下：&script language=&javascript& src=&js/request.js&&&/script&&script language=&javascript&&var request =function getProgress(){&var url=&showProgress.jsp&; //服务器地址var param =&nocache=&+new Date().getTime(); //每次请求URL参数都不同 ，避免上传时进度条不动request=httpRequest(&post&,url,true,callbackFunc,param); //调用请求方法&}//Ajax回调函数function callbackFunc(){if( request.readyState==4 ){ //判断响应是否完成&if( request.status == 200 ){ //判断响应是否成功var h = request.responseT //获得返回的响应数据，该数据位上传进度百分比h=h.replace(/\s/g,&&); //去除字符串中的Unicode空白符document.getElementById(&progressPercent&).style.display=&&; //显示百分比&progressPercent.innerHTML=h+&%&; //显示完成的百分比document.getElementById(&progressBar&).style.display=&block&; //显示进度条document.getElementById(&imgProgress&).width=h*(235/100); //显示完成的进度}}}&/script&（5）编写showProgress.jsp页面，在该页中应用EL表达式输出保存在session域中的上传进度条的值，具体代码如下：&%@page contentType=&text/html& pageEncoding=&GBK&%&${progressBar}（6）编写表单提交按钮onclick事件所调用的JavaScript方法，在该方法通过window对象的setInterval()方法每隔一定时间请求一次服务器，获得最新的上传进度，关键代码如下：function deal(form){form.submit(); //提交表单timer=window.setInterval(&getProgress()&,500); //每隔500毫秒获取一次上传进度}以上所述是小编给大家介绍的基于Ajax技术实现文件上传带进度条的相关知识，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对课栈网的支持！"
用微信扫描二维码分享至好友和朋友圈
您正在浏览基于Ajax技术实现文件上传带进度条，查找基于Ajax技术实现文件上传带进度条相关课程，请进入课栈网进行搜索。
您还可以访问手机版：
课栈公众号
课栈网APP下载
网站地图：}