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="data:images/progressBar.gif" width="0" height="13" id="imgProgress"></div> <span id="progressPercent" style="width:40px;display: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/html;charset=GBK");
request.setCharacterEncoding("GBK");
HttpSession session=request.getSession();
session.setAttribute("progressBar",0); //定义指定上传进度的Session变量
String error = "";
int maxSize=50*1024*1024; //单个上传文件大小的上限
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的文件";
break;
}
// 此时文件暂存在服务器的内存中
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 = false;
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.responseText; //获得返回的响应数据,该数据位上传进度百分比
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实现带进度条的文件上传 文件上传页面运行效果 上传文件并显示进度条运行效果 代码如下; DiskFileItemFactory factory = new DiskFileItemFactor ...
- Android带进度条的文件上传,使用AsyncTask异步任务
最近项目中要做一个带进度条的上传文件的功能,学习了AsyncTask,使用起来比较方便,将几个方法实现就行,另外做了一个很简单的demo,希望能对大家有帮助,在程序中设好文件路径和服务器IP即可. A ...
- 采用formdata做跨域的、无刷新、带进度条的文件上传
以前做无刷新上传,都要用iframe,如果想有进度条,就千难万难,不得不用flash等插件来实现. 现在HTML5终于普及了,筒子们不用再那么痛苦了. 所有这一切都变得异常简单!! 不信?且看如下代码 ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 基于mvc三层架构和ajax技术实现最简单的文件上传
前台页面提交文件 <!DOCTYPE html> <html><head> <meta name="viewport" content=& ...
- HTML5利用FormData对象实现显示进度条的文件上传
摘自:https://blog.csdn.net/q1056843325/article/details/53759963 自己做是按这个实现的,兼容性还不错 完整简约的解决方案 下面的代码清单是包括 ...
- 带进度条的文件批量上传插件uploadify
有时项目中需要一个文件批量上传功能时,个人认为uploadify是快速简便的解决方案. 先上效果图: 一. 下载uploadify 从官网下载uploadify的Flash版本(Flash版本免费,另 ...
- 初识html5 File API实现带有进度提示的文件上传
Html5终于解决了上传文件的同时显示文件上传进度的老问题.现在大部分的网站用Flash去实现这一功能,还有一些网站继续采用Html <form>with enctype=multipar ...
- [SAP ABAP开发技术总结]文本文件、Excel文件上传下传
声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...
随机推荐
- jmeter 压力测试 参数
Aggregate Report 是 JMeter 常用的一个 Listener,中文被翻译为“聚合报告”.今天再次有同行问到这个报告中的各项数据表示什么意思,顺便在这里公布一下,以备大家查阅. 如果 ...
- tf–idf算法解释及其python代码实现(上)
tf–idf算法解释 tf–idf, 是term frequency–inverse document frequency的缩写,它通常用来衡量一个词对在一个语料库中对它所在的文档有多重要,常用在信息 ...
- poj 2356
http://poj.org/problem?id=2356 方法一: 鸽巢原理 解题思路: n个数,,依次求其s[0],s[1],s[2],s[3].....s[n] 然后对 n取模,,必然会 ...
- Java疯狂讲义(二)
- angularJS友好URL实现 good
nginx部署 angularjs时的rewrite问题 使用h5+angularjs完成了一个项目 此项目在正式环境上使用nginx做webserver 此项目的入口在微信/微博分享中 由于分享时的 ...
- poj 1458 Common Subsequence(区间dp)
题目链接:http://poj.org/problem?id=1458 思路分析:经典的最长公共子序列问题(longest-common-subsequence proble),使用动态规划解题. 1 ...
- 点菜系统 pickview的简单实用
使用pickview的时候多想想tableview的使用,观察两者的相同之处 pickview的主要用途用于选择地区 生日年月日 和点餐 示例代码 简单的pickview点餐系统// ViewC ...
- vs2013内置IISExpress相关问题
问题描述,以前做的程序迁移到vs2013后出现500.22问题. HTTP 错误 500.22 - Internal Server Error 检测到在集成的托管管道模式下不适用的 ASP.NET 设 ...
- 【Oracle】wmsys.wm_concat函数字段值为空
这个是因为字符集的问题,和空值是没关系的.其实已经取到了数据,可以验证一下返回的不是0,但是由于这个里面有个chr(0)字符,而且可能第一个字符就是chr(0),所以就显示得怪异的空现象.至于为何会出 ...
- 内核必看: spinlock、 mutex 以及 semaphore
linux 内核的几种锁介绍 http://wenku.baidu.com/link?url=RdvuOpN3RPiC5aY0fKi2Xqw2MyTnpZwZbE07JriN7raJ_L6Ss8Ru1 ...