itjoy的专栏(5)_H5之家 - 中国HTML5教程资源分享第一站

　　 fileUpload.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)+'http://blog.csdn.net/'+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