AJAX实现基于WEB的文件上传的进度控制资源-CSDN文库

147 浏览量 2021-03-04 19:20:55 上传评论收藏 180KB PDF 举报

资源推荐

资源详情

资源评论

AJAX实现基于实现基于WEB的文件上传的进度控制的文件上传的进度控制

火龙果软件工程技术中心

1.引言引言

2.代码实现代码实现

　2.1.服务器端代码

2.1.1. 文件上传状态类（FileUploadStatus）

2.1.2. 文件上传状态侦听类（FileUploadListener）

2.1.3. 后台服务类（BackGroundService）

2.1.4. 文件上传状态控制类（BeanControler）

2.2. 客户端代码

2.2.1. AjaxWrapper.js

2.2.2. fileUpload.html

2.2.3. result.jsp

2.2.4. fileUpload.css

2.3. 配置文件

3. 结语结语

1. 引言引言

　基于浏览器的文件上传，特别是对于通过<input type="file">标签来实现上传的情况，存在着严重的性能问题，因为用户提

交了文件之后，在浏览器把文件上传到服务器的过程中，界面看上去似乎是静止的，如果是小文件还好些，如果不幸需要上传

的是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种不堪的经历。（一

笑）

现在我就针对这个问题给出一个解决方案，我们将实现一个具有监控能力的WEB上传的程序——它不仅把文件上传到服务

器，而且"实时地"监视文件上传的实际过程。

解决方案的基本思路是这样的：

在Form提交上传文件同时，使用AJAX周期性地从Servlet轮询上传状态信息

然后，根据此信息更新进度条和相关文字，及时反映文件传输状态

如果用户取消上传操作，则进行相应的现场清理工作：删除已经上传的文件，在Form提交页面中显示相关信息

如果上传完毕，显示已经上传的文件内容(或链接)

在介绍源代码之前，我们先来看看程序运行界面：

　2. 实现代码实现代码

　实现代码想当然的有服务器端代码和客户端代码（呵呵），我们先从服务器端开始。

2.1. 服务器端代码服务器端代码

　2.1.1. 文件上传状态类（文件上传状态类（FileUploadStatus））

　使用FileUploadStatus这个类记录文件上传状态，并将其作为服务器端与web客户端之间通信的媒介，通过对这个类对象提

供上传状态作为服务器回应发送给web客户端，web客户端使用JavaScript获得文件上传状态。源代码如下：

/**

* 本例程演示了通过Web上传文件过程中的进度显示。您可以对本例程进行任何修改和使用。

* 如需要转载，请注明作者。

* 作者：刘作晨

.append("ProcessStartTime:").append(getProcessStartTime()).

append(",")

.append("ProcessEndTime:").append(getProcessEndTime()).append(

",")

.append("ProcessRunningTime:").append(getProcessRunningTime()).

append(",")

.append("Cancel:").append(getCancel()).append("}");

return strJSon.toString();

}

2.1.2. 文件上传状态侦听类（文件上传状态侦听类（FileUploadListener））

　使用Common-FileUpload 1.2版本(20070103)。此版本提供了能够监视文件上传情况的ProcessListener接口，使开发者通

过FileUploadBase类对象的setProcessListener方法植入自己的Listener。 FileUploadListener类实现了ProcessListener，在整

个文件上传过程中，它对上传进度进行监控，并且根据上传情况实时的更新上传状态Bean。源代码如下：

package liuzuochen.sample.upload;

import org.apache.commons.fileupload.ProgressListener;

import javax.servlet.http.HttpServletRequest;

public class FileUploadListener implements ProgressListener{

private HttpServletRequest request=null;

public FileUploadListener(HttpServletRequest request){

this.request=request;

}

/**

* 更新状态

public void update(long pBytesRead, long pContentLength, int pItems){

FileUploadStatus statusBean= BackGroundService.getStatusBean(request);

statusBean.setUploadTotalSize(pContentLength);

//读取完成

if (pContentLength == -1) {

statusBean.setStatus("完成对" + pItems +"个文件的读取:读取了 " + pBytesRead + " bytes.");

statusBean.setReadTotalSize(pBytesRead);

statusBean.setSuccessUploadFileCount(pItems);

statusBean.setProcessEndTime(System.currentTimeMillis());

statusBean.setProcessRunningTime(statusBean.getProcessEndTime());

//读取中

} else {

statusBean.setStatus("当前正在处理第" + pItems +"个文件:已经读取了 " + pBytesRead + " / " +

pContentLength+ " bytes.");

statusBean.setReadTotalSize(pBytesRead);

statusBean.setCurrentUploadFileNum(pItems);

statusBean.setProcessRunningTime(System.currentTimeMillis());

}

2.1.3. 后台服务类（后台服务类（BackGroundService））

　BackGroundService这个Servlet类负责接收Form Post数据、回应状态轮询请求、处理取消文件上传的请求。尽管可以把这

些功能相互分离开来，但为了简单明了，还是将它们放到Servlet中，只是由不同的方法进行分割。源代码如下：

package liuzuochen.sample.upload;

import java.io.File;

import java.io.IOException;

import java.util.List;

剩余21页未读，继续阅读

评论收藏

内容反馈

weixin_38718262

粉丝: 9
资源: 950

AJAX实现基于WEB的文件上传的进度控制

AJAX实现基于WEB的文件上传的进度控制源代码

AJAX+JSP实现基于WEB的文件上传的进度控制

AJAX+JSP实现基于WEB的文件上传的进度控制.rar

通过AJAX监控文件上传进度

利用AJAX控制上传文件进度,并生成进度条

基于Ajax技术实现文件上传带进度条

ajax+webservice跨域实现文件上传

AJAX和JSP实现的基于WEB的文件上传的进度控制代码第1/2页

基于HTML5 Ajax实现文件上传并显示进度条

MVC中基于Ajax和HTML5实现文件上传功能

基于AJAX技术的WEB研究与实现.pdf

PHP的AJAX技术实现文件异步上传

php+AJAX实现文件上传系统

不使用AJAX的文件上传进度栏

axios实现文件上传并获取进度

基于jquery ajax的多文件上传进度条过程解析

基于jsp的AJAX多文件上传的实例

java基于servlet实现文件上传功能解析

jquery+ajax实现异步上传文件显示进度条

JSP_模拟AJAX实现无刷新文件上传

基于jsp的AJAX多文件上传的实例.docx

C#实现AJAX 上传文件，图片，音乐，

ssm实现多文件上传实时更新进度信息

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）