首页 > 其他分享 >AJAX实现基于WEB的文件上传的进度控制保存草稿

AJAX实现基于WEB的文件上传的进度控制保存草稿

时间：2023-06-15 18:06:06浏览次数：50  
标签：function WEB 草稿 funcHolder AJAX var 上传 public append


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

 

作者：liuzuochen　

 

1. 引言

　基于浏览器的文件上传，特别是对于通过<input type="file">标签来实现上传的情况，存在着严重的性能问题，因为用户提交了文件之后，在浏览器把文件上传到服务器的过程中，界面看上去 似乎是静止的，如果是小文件还好些，如果不幸需要上传的是几兆、几十兆甚至上百兆的文件，我相信那是一种非常痛苦的体验，我们中间的很多人应该都有过此种 不堪的经历。（一笑）

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

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

  • 在Form提交上传文件同时，使用AJAX周期性地从Servlet轮询上传状态信息
  • 然后，根据此信息更新进度条和相关文字，及时反映文件传输状态
  • 如果用户取消上传操作，则进行相应的现场清理工作：删除已经上传的文件，在Form提交页面中显示相关信息
  • 如果上传完毕，显示已经上传的文件内容(或链接)

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

AJAX实现基于WEB的文件上传的进度控制保存草稿_文件上传



2. 实现代码


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

2.1. 服务器端代码
2.1.1. 文件上传状态类（FileUploadStatus）

　使用FileUploadStatus这个类记录文件上传状态，并将其作为服务器端与web客户端之间通信的媒介，通过对这个类对象提供上传状态作为服 务器回应发送给web客户端，web客户端使用JavaScript获得文件上传状态。源代码如下：

/**
* 本例程演示了通过Web上传文件过程中的进度显示。您可以对本例程进行任何修改和使用。
*
* 如需要转载，请注明作者。
*
* 作者： 刘作晨
*
*/
package liuzuochen.sample.upload;
import java.util.*;

public class FileUploadStatus {
//上传用户地址
private String uploadAddr;
//上传总量
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 = false;
//上传base目录
private String baseDir = "";

public FileUploadStatus() {

}

public String getBaseDir() {
return baseDir;
}

public void setBaseDir(String baseDir) {
this.baseDir = baseDir;
}

public boolean getCancel() {
return cancel;
}

public void setCancel(boolean cancel) {
this.cancel = cancel;
}

public List getUploadFileUrlList() {
return uploadFileUrlList;
}

public void setUploadFileUrlList(List uploadFileUrlList) {
this.uploadFileUrlList = uploadFileUrlList;
}

public long getProcessRunningTime() {
return processRunningTime;
}

public void setProcessRunningTime(long processRunningTime) {
this.processRunningTime = processRunningTime;
}

public long getProcessEndTime() {
return processEndTime;
}

public void setProcessEndTime(long processEndTime) {
this.processEndTime = processEndTime;
}

public long getProcessStartTime() {
return processStartTime;
}

public void setProcessStartTime(long processStartTime) {
this.processStartTime = processStartTime;
}

public long getReadTotalSize() {
return readTotalSize;
}

public void setReadTotalSize(long readTotalSize) {
this.readTotalSize = readTotalSize;
}

public int getSuccessUploadFileCount() {
return successUploadFileCount;
}

public void setSuccessUploadFileCount(int successUploadFileCount) {
this.successUploadFileCount = successUploadFileCount;
}

public int getCurrentUploadFileNum() {
return currentUploadFileNum;
}

public void setCurrentUploadFileNum(int currentUploadFileNum) {
this.currentUploadFileNum = currentUploadFileNum;
}

public String getStatus() {
return status;
}

public void setStatus(String status) {
this.status = status;
}

public long getUploadTotalSize() {
return uploadTotalSize;
}

public String getUploadAddr() {
return uploadAddr;
}

public void setUploadTotalSize(long uploadTotalSize) {
this.uploadTotalSize = uploadTotalSize;
}

public void setUploadAddr(String uploadAddr) {
this.uploadAddr = uploadAddr;
}

public String toJSon() {
StringBuffer strJSon = new StringBuffer();
strJSon.append("{UploadTotalSize:").append(getUploadTotalSize()).append(
",")
.append("ReadTotalSize:").append(getReadTotalSize()).append(",")
.append("CurrentUploadFileNum:").append(getCurrentUploadFileNum()).
append(",")
.append("SuccessUploadFileCount:").append(
getSuccessUploadFileCount()).append(",")
.append("Status:'").append(getStatus()).append("',")
.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 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.4. 文件上传状态控制类（BeanControler）

　这是一个单例类，它的功能是为客户端保存文件上传状态，这里我没有使用Session来存储文件上传状态，因为对于AJAX这种异步调用，服务器会开启不同的Session，所以无法通过Session保存文件上传状态。 我并不认为这种方法最好，如果有更好的方法，欢迎大家一起讨论。 源代码如下：

*
*/
package liuzuochen.sample.upload;
import java.util.Vector;

public class BeanControler {
private static BeanControler beanControler = new BeanControler();
private Vector vector = new Vector();
private BeanControler() {
}

public static BeanControler getInstance() {
return beanControler;
}

/**
* 取得相应FileUploadStatus类对象的存储位置
*/
private int indexOf(String strID) {
int nReturn = -1;
for (int i = 0; i < vector.size(); i++) {
FileUploadStatus status = (FileUploadStatus) vector.elementAt(i);
if (status.getUploadAddr().equals(strID)) {
nReturn = i;
break;
}
}
return nReturn;
}
/**
* 取得相应FileUploadStatus类对象
*/
public FileUploadStatus getUploadStatus(String strID) {
return (FileUploadStatus) vector.elementAt(indexOf(strID));
}
/**
* 存储FileUploadStatus类对象
*/
public void setUploadStatus(FileUploadStatus status) {
int nIndex = indexOf(status.getUploadAddr());
if ( -1 == nIndex) {
vector.add(status);
} else {
vector.insertElementAt(status, nIndex);
vector.removeElementAt(nIndex + 1);
}
}
/**
* 删除FileUploadStatus类对象
*/
public void removeUploadStatus(String strID){
int nIndex = indexOf(strID);
if(-1!=nIndex)
vector.removeElementAt(nIndex);
}
}
————————————————

2.2. 客户端代码

　客户端我们采用Prototype框架。

2.2.1. AjaxWrapper.js

　AjaxWrapper.js对Prototype进行了封装。 源代码如下：

//类工具
var ClassUtils=Class.create();
ClassUtils.prototype={
_ClassUtilsName:'ClassUtils',
initialize:function(){
},
/**
* 给类的每个方法注册一个对类对象的自我引用
* @param reference 对类对象的引用
*/
registerFuncSelfLink:function(reference){
for (var n in reference) {
var item = reference[n];
if (item instanceof Function)
item.$ = reference;
}
}
}
//Ajax操作封装类：
//由于调用AjaxRequest类进行XMLHTTPRequest操作时，this引用（指向当前的对象）会出现了call stack问题，从而指向当前的对象。
//所以，对putRequest、callBackHandler、以及callback方法都要使用arguments.callee.$来获得正确的类对象引用
var AjaxWrapper=Class.create();
AjaxWrapper.prototype={
debug_flag:false,
xml_source:'',
/**
* 初始化
* @param isDebug 是否显示调试信息
*/
initialize:function(isDebug){
new ClassUtils().registerFuncSelfLink(this);
this.debug_flag=isDebug;
},
/**
* 以get的方式向server发送request
* @param url
* @param params
* @param callBackFunction 发送成功后回调的函数或者函数名
*/
putRequest:function(url,params,callBackFunction){
var funcHolder=arguments.callee.$;
var xmlHttp = new Ajax.Request(url,
{
method: 'get',
parameters: params,
requestHeaders:['my-header-encoding','utf-8'],
onFailure: function(){
alert('对不起，网络通讯失败，请重新刷新！');
},
onSuccess: function(transport){
},
onComplete: function(transport){
funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
}
});
},
/**
* 以post的方式向server发送xml请求
* @param url
* @param postDataBody
* @param callBackFunction 发送成功后回调的函数或者函数名
*/
pushRequest:function(url,postDataBody,callBackFunction){
var funcHolder=arguments.callee.$;
var options={
method: 'post',
parameters:'',
requestHeaders:['my-header-encoding','utf-8'],
postBody: postDataBody,
onFailure: function(transport){
alert('对不起，网络通讯失败，请重新发送！');
},
onComplete: function(transport){
funcHolder.callBackHandler.apply(funcHolder,[transport,callBackFunction]);
}
};
var xmlHttp = new Ajax.Request(url,options);
},
/**
* 远程调用的回调处理
* @param transport xmlhttp的transport
* @param callBackFunction 回调时call的方法，可以是函数也可以是函数名
*/
callBackHandler:function(transport,callBackFunction){
var funcHolder=arguments.callee.$;
if(transport.status!=200){
alert("获得回应失败,请求状态:"+transport.status);
}
else{
funcHolder.xml_source=transport.responseText;
if (funcHolder.debug_flag)
alert('call callback function');
if (typeof(callBackFunction)=='function'){
if (funcHolder.debug_flag){
alert('invoke callbackFunc');
}
callBackFunction(transport.responseText);
}
else{
if (funcHolder.debug_flag){
alert('evalFunc callbackFunc');
}
new execute().evalFunc(callBackFunction,transport.responseText);
}
if (funcHolder.debug_flag)
alert('end callback function');
}
},
//显示xml信息
showXMLResponse:function(){
var funcHolder=arguments.callee.$;
alert(funcHolder.xml_source);
}
}
var XMLDomForAjax=Class.create();
XMLDomForAjax.prototype={
isDebug:false,
//dom节点类型常量
ELEMENT_NODE:1,
ATTRIBUTE_NODE:2,
TEXT_NODE:3,
CDATA_SECTION_NODE:4,
ENTITY_REFERENCE_NODE:5,
ENTITY_NODE:6,
PROCESSING_INSTRUCTION_NODE:7,
COMMENT_NODE:8,
DOCUMENT_NODE:9,
DOCUMENT_TYPE_NODE:10,
DOCUMENT_FRAGMENT_NODE:11,
NOTATION_NODE:12,
initialize:function(isDebug){
new ClassUtils().registerFuncSelfLink(this);
this.isDebug=isDebug;
},
/**
* 建立跨平台的dom解析器
* @param xml xml字符串
* @return dom解析器
*/
createDomParser:function(xml){
// code for IE
if (window.ActiveXObject){
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(xml);
}
// code for Mozilla, Firefox, Opera, etc.
else{
var parser=new DOMParser();
var doc=parser.parseFromString(xml,"text/xml");
}
return doc;
},
/**
* 反向序列化xml到javascript Bean
* @param xml xml字符串
* @return javascript Bean
*/
deserializedBeanFromXML:function (xml){
var funcHolder=arguments.callee.$;
var doc=funcHolder.createDomParser(xml);
// documentElement总表示文档的root
var objDomTree=doc.documentElement;
var obj=new Object();
for (var i=0; i<objDomTree.childNodes.length; i++) {
//获得节点
var node=objDomTree.childNodes[i];
//取出其中的field元素进行处理
if ((node.nodeType==funcHolder.ELEMENT_NODE) && (node.tagName == 'field')) {
var nodeText=funcHolder.getNodeText(node);
if (funcHolder.isDebug){
alert(node.getAttribute('name')+' type:'+node.getAttribute('type')+' text:'+nodeText);
}
var objFieldValue=null;
//如果为列表
if (node.getAttribute('type')=='java.util.List'){
if (objFieldValue && typeof(objFieldValue)=='Array'){
if (nodeText.length>0){
objFieldValue[objFieldValue.length]=nodeText;
}
}
else{
objFieldValue=new Array();
}
}
else if (node.getAttribute('type')=='long'
|| node.getAttribute('type')=='java.lang.Long'
|| node.getAttribute('type')=='int'
|| node.getAttribute('type')=='java.lang.Integer'){
objFieldValue=parseInt(nodeText);
}
else if (node.getAttribute('type')=='double'
|| node.getAttribute('type')=='float'
|| node.getAttribute('type')=='java.lang.Double'
|| node.getAttribute('type')=='java.lang.Float'){
objFieldValue=parseFloat(nodeText);
}
else if (node.getAttribute('type')=='java.lang.String'){
objFieldValue=nodeText;
}
else{
objFieldValue=nodeText;
}
//赋值给对象
obj[node.getAttribute('name')]=objFieldValue;
if (funcHolder.isDebug){
alert(eval（'obj.'+node.getAttribute('name')));
}
}
else if (node.nodeType == funcHolder.TEXT_NODE){
if (funcHolder.isDebug){
//alert('TEXT_NODE');
}
}
else if (node.nodeType == funcHolder.CDATA_SECTION_NODE){
if (funcHolder.isDebug){
//alert('CDATA_SECTION_NODE');
}
}
}
return obj;
},
/**
* 获得dom节点的text
*/
getNodeText:function (node) {
var funcHolder=arguments.callee.$;
// is this a text or CDATA node?
if (node.nodeType == funcHolder.TEXT_NODE || node.nodeType == funcHolder.CDATA_SECTION_NODE) {
return node.data;
}
var i;
var returnValue = [];
for (i = 0; i < node.childNodes.length; i++) {
//采用递归算法
returnValue.push(funcHolder.getNodeText(node.childNodes[i]));
}
return returnValue.join('');
}
}
//委托者类
var Dispatcher=Class.create();
Dispatcher.prototype={
name:'Dispatcher',
//对class中的每个function都赋值一个值为this的$属性
initialize:function(){
new ClassUtils().registerFuncSelfLink(this);
},
/**
* 委托调用
* @param caller 调用者，func的拥有者
* @param func 如果是function对象，则使用Dispatcher对象自己的name作为参数；否则直接调用func
*/
dispatch:function(caller,func){
if (func instanceof Function){
var funcArguments=new Array();
funcArguments[0]=arguments.callee.$.name;
func.apply(caller,funcArguments);
}
else{
eval（func);
}
}
}
//祈祷者类
var Invoker=Class.create();
Invoker.prototype={
name:'Invoker',
initialize:function(){
},
invoke:function(showMsg){
alert(showMsg+"——this.name="+this.name);
}
}
————————————————

2.2.2. fileUpload.html

　fileUpload.html是文件上传界面。 源代码如下：

<html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script type="text/javascript" src="./javascript/prototype.js"></script>
<script type="text/javascript" src="./javascript/AjaxWrapper.js"></script>
<link href="./css/fileUpload.css" type="text/css" rel="stylesheet"/>
<title>文件上传</title>
</head>
<body>
<div id="controlPanel">
<div id="readme">测试说明: 最大上传量:100M，单个文件最大长度:100M</div>
<div id="uploadFileUrl"></div>
<form id="fileUploadForm" name="fileUploadForm" action="./BackGroundService.action"
enctype="multipart/form-data" method="post">
<input type="file" name="file" id="file" size="40"/><br>
<input type="file" name="file" id="file" size="40"/><br>
<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="取消上传"/><br>
</form>
<div id="progressBar">
<div id="theMeter">
<div id="progressBarText"></div>
<div id="totalProgressBarBox">
<div id="totalProgressBarBoxContent"></div>
</div>
</div>
<div id="progressStatusText"></div>
</div>
</div>
<script>
Element.hide('progressBar');
Event.observe('fileUploadForm','submit',startProgress,false);
Event.observe('cancelUploadButton','click',cancelProgress,false);
//刷新上传状态
function refreshUploadStatus(){
var ajaxW = new AjaxWrapper(false);
ajaxW.putRequest(
'./BackGroundService.action',
'uploadStatus=',
function(responseText){
eval（"uploadInfo = " + responseText);
var progressPercent = Math.ceil(
(uploadInfo.ReadTotalSize) / uploadInfo.UploadTotalSize * 100);

$('progressBarText').innerHTML = ' 上传处理进度: '+progressPercent+'% ['+
(uploadInfo.ReadTotalSize)+'/'+uploadInfo.UploadTotalSize + ' bytes]'+
' 正在处理第'+uploadInfo.CurrentUploadFileNum+'个文件'+
' 耗时: '+(uploadInfo.ProcessRunningTime-uploadInfo.ProcessStartTime)+' ms';
$('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.Status;
$('totalProgressBarBoxContent').style.width = parseInt(progressPercent * 3.5) + 'px';
}
);
}
//上传处理
function startProgress(){
Element.show('progressBar');
$('progressBarText').innerHTML = ' 上传处理进度: 0%';
$('progressStatusText').innerHTML=' 反馈状态:';
$('uploadButton').disabled = true;
var periodicalExe=new PeriodicalExecuter(refreshUploadStatus,0.5);
return true;
}
//取消上传处理
function cancelProgress(){
$('cancelUploadButton').disabled = true;
var ajaxW = new AjaxWrapper(false);
ajaxW.putRequest(
'./BackGroundService.action',
'cancelUpload=true',
//因为form的提交，这可能不会执行
function(responseText){
eval（"uploadInfo = " + responseText);
$('progressStatusText').innerHTML=' 反馈状态: '+uploadInfo.status;
if (msgInfo.cancel=='true'){
alert('删除成功!');
window.location.reload();
};
}
);
}
</script>
</body>
</html>

2.2.3. result.jsp

　result.jsp是文件上传结果显示界面。 源代码如下：

<%@ page language="java"
contentType="text/html; charset=GBK"
pageEncoding="GBK"%>
<%@ page import="liuzuochen.sample.upload.*" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<link href="./css/fileUpload.css" type="text/css" rel="stylesheet"/>
<title>文件上传结果</title>
</head>
<body>
<div id="resultPanel">
<div><span>上传文件列表:</span></div>
<%
FileUploadStatus fUploadStatus=BackGroundService.getStatusBean(request);
for(int i=0;i<fUploadStatus.getUploadFileUrlList().size();i++){
String fileName=(String)fUploadStatus.getUploadFileUrlList().get(i);
String url=fUploadStatus.getBaseDir()+"/"+fileName;
%>
<div><a href="<%=url%>" _fcksavedurl="<%=url%>" _fcksavedurl="<%=url%>"
_fcksavedurl="<%=url%>"><%=fileName%></a></div>
<%
}
if (fUploadStatus.getStatus().indexOf("错误")>=0){
%>
<div id='errorArea'><span>错误信息:<%=fUploadStatus.getStatus() %></span></div>
<%
}
else if (fUploadStatus.getCancel()){
%>
<div id='normalMessageArea'><span>由于用户取消上传，所以已经上传的文件均被删除</span></div>
<%
}
BeanControler.getInstance().removeUploadStatus(request.getRemoteAddr());
%>
</div>
</body>
</html>

2.2.4. fileUpload.css

　fileUpload.css是样式文件。 源代码如下：

body {
color:#000;
background-color:white;
font:15px Georgia, "Lucida Grande", Arial, sans-serif;
letter-spacing:0.01em;
margin:15px;
}
#controlPanel,#resultPanel{
width:700px;
margin:20px auto;
padding:25px;
border:3px solid gray;
-moz-border-radius:10px;
background:#f8f8f8;
}
#errorArea{
width:400px;
margin:20px auto;
padding:25px;
border:3px solid gray;
-moz-border-radius:10px;
background:red;
}
#normalMessageArea{
width:400px;
margin:20px auto;
padding:25px;
border:3px solid gray;
-moz-border-radius:10px;
background:yellow;
}
#progressBar { padding-top: 5px; }
#totalProgressBarBox {
width: 350px;
height: 20px;
border: 1px inset;
background: #eee;
}
#totalProgressBarBoxContent {
width: 0;
height: 20px;
border-right: 1px solid #444;
background: #9ACB34;
}

2.3. 配置文件

　

<servlet>
<br><description>
<br></description>
<br><display-name>
<br>BackGroundService</display-name>
<br><servlet-name>BackGroundService</servlet-name>
<br><servlet-class>
<br>liuzuochen.sample.upload.BackGroundService</servlet-class>
<br></servlet>
<br><servlet-mapping>
<servlet-name>BackGroundService</servlet-name>
<url-pattern>*.action</url-pattern>
</servlet-mapping>

3. 结语
　整个程序到这里就介绍完了，希望它多少能为您的工作或学习带来点儿帮助。如果您需要程序的全部源代码，请发邮件给我。

标签：function,WEB,草稿,funcHolder,AJAX,var,上传,public,append
From： https://blog.51cto.com/u_16065168/6493789

相关文章

  • web中使用POI的例子
    web中使用POI的例子struts1.x的例子，struts2.x可以参考自己修改1.action的写法 importjava.io.*;importjava.sql.*;importjava.util.ArrayList;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.......
  • c# WebUploader 分块上传
    ​ASP.NET上传文件用FileUpLoad就可以，但是对文件夹的操作却不能用FileUpLoad来实现。下面这个示例便是使用ASP.NET来实现上传文件夹并对文件夹进行压缩以及解压。ASP.NET页面设计：TextBox和Button按钮。​编辑TextBox中需要自己受到输入文件夹的路径（包含文件夹），通过Button实......
  • web基础与HTTP协议
    目录一、DNS二、域名三、web基础四、HTTP五、总结        摘要：简单叙述web基础，网页的概念，域名解析，域名结构，HTML超文本传输语言，cookie和session扩展 一、DNS1.DNS概念内网和外网无法通信，为了内网可以和外网通信，dns技术解决问题，可......
  • Web 前端框架市场统计
    根据  w3techs所做的统计1，有17.8%的网站没有使用javascript库。在使用js库的web网站中，Jquery占据了大部分，Bootstrap, React，Ajax, Vue，Angular排行如下：其他还有一些js库占据剩下的1%： 对于React,Angular,Vue的统计比较2如下：React占据所有已知使用js的网站......
  • WebRtc链接
    1.FEC原理及其实现https://blog.csdn.net/tonychan129/article/details/1205397262.webrtcQOS方法（汇总篇）https://blog.csdn.net/tonychan129/article/details/1205819013.WebRTC架构分析-WebRTC的线程模型https://blog.csdn.net/tonychan129/article/details/1255858034.WebR......
  • .net WebUploader 分块上传
    ​ 一、概述 所谓断点续传，其实只是指下载，也就是要从文件已经下载的地方开始继续下载。在以前版本的HTTP协议是不支持断点的，HTTP/1.1开始就支持了。一般断点下载时才用到Range和Content-Range实体头。HTTP协议本身不支持断点上传，需要自己实现。 二、Range  用于请求头......
  • Nginx支持web界面执行bash|python等系统命令和脚本
    ##关闭防火墙##（centos6）serviceiptablesstopchkconfigiptablesoff##（centos7）systemctlstopfirewalldsystemctldisablefirewalld#关闭selinuxsed-i's/SELINUX=enforcing/SELINUX=disabled/'/etc/selinux/configsetenforce0#已有epel源的跳过此步骤，直接安装......
  • 本地下载 web file操作
    functiondownload(){constlink=document.createElement('a')link.href=window.location.origin+`/static/doc/${this.type}.docx`+'?auth='+getToken()constfileName='20230615.docx'link.download=fil......
  • c#.net WebUploader 分块上传
    ​ 以ASP.NETCoreWebAPI 作后端 API ，用 Vue 构建前端页面，用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......
  • web网络通信
    WEB通信流程静态数据:png,css,js,gif,mp4动态数据:从mysql数据库中读取出来的数据访问DNS服务器,通过DNS获取相应的域名对应IP通过IP对应服务器后,简历TCP连接等浏览器发送完HTTPRequest包后,服务器接收到请求包后才开始处理请求包服务器调用自身服务,返回HTTPResponse(......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99