1、文件下载页面用来显示要下载的文件数量和大小,以及总文件大小。数据展示这里就不贴了,就贴后面需要用到的三个弹出层吧:遮罩层、文件下载提示框、下载完成弹出框。
<!-- 遮罩层 -->
<div id="zhegai" style="display:none;width:100%;height: 100%;top:0px;left:0px;position:absolute;filter:Alpha(Opacity=50);z-index:1000;background:#000000;-moz-opacity: 0.5; opacity:.50; " >
<iframe style="width:100%;height:100%;filter:Alpha(Opacity=10);position:absolute;z-index='1001';border:none\' frameborder=\'no\' border=\'0\' "></iframe>
</div>
<!-- 稍后框 -->
<div align="center" id="msgDiv" style="display:none; border:0px;z-index:9999999; position: absolute; text-align: center;background:none; width: 300px; font: 12px/25px Verdana, Geneva, Arial, Helvetica, sans-serif; height: 100px;margin-top:-50px; margin-left: -150px; top: 50%; left: 50%;">
<img src="admin/img/wait.gif"/>
<br />
<span style="color:#fff;font-size:14px;text-align:center;font-weight:bold;">文件下载中请稍后......</span>
</div>
<!-- 关闭弹出层 -->
<div align="center" id="closeDiv" style="display:none;margin-top:-40px;height:80px;position:absolute;width:299px; overflow:hidden;background:#fff;border: 1px solid #087bb4; left:50%;top:50%;font:12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif;lin-height:25px;z-index:9999999;margin-left:-150px;">
<h4 id="msgTitle" onclick="closeDiv();" style="background:#20AAE5;padding:3px;margin:0px;text-align:right;height:18px;color:#fff;cursor:pointer;">[x]</h4>
<p align="center" id="msgTxt" style="margin: 1em 0px; padding-left: 5px; padding-right: 5px;color:#666666;font-size:14px;font-weight:bold;">下载完成</p>
</div>
2、点击“下载文件到本地”按钮时触发事件以及后续处理事件:
PS:1、JS中有关使用JS获取U盘信息的功能请参考“获取磁盘信息并扫描是否连接移动磁盘之JS版”
2、代码中有关文件下载的代码参考自这里。
var tt = 2 *1000;//2秒扫描一次
var interval=null;
var fso = null;
var tt2 = 2 *1000;//2秒扫描一次
var downInterval=null;//文件下载扫描
var currentDisk=null;//当前正在使用的磁盘
//该方法用来从服务器下载文件到U盘
function downFileToUpan(){
//1、先检测是否连接到U盘
var diskArr = getDiskInfo(1,1);
if(diskArr.length<=0){//说明没有连接U盘
alert("请先插入磁盘");
return false;
}else if(diskArr.length>1){//说明至少有2块U盘
alert("检测到有"+diskArr.length+"块磁盘,请先清除其他磁盘确保只有一块可移动磁盘\n清除之后请重新刷新该页面");
return false;
}else{
currentDisk = diskArr[0];
var availableSpace = getDiskSpace(currentDisk.AvailableSpace,1,2);//以GB为单位的U盘剩余容量
var fileTotalSize = $("#fileTotalSize").text();//所选文件总大小
//alert(typeof(availableSpace)+"\t"+typeof fileTotalSize);
availableSpace = parseFloat(availableSpace);//将字符串转换成浮点数
fileTotalSize = parseFloat(fileTotalSize);
//alert(typeof(availableSpace)+"\t"+typeof fileTotalSize);
fileTotalSize +=fileTotalSize*0.05;//添加10%的剩余空间,避免出现空间不足的情况
if(availableSpace-fileTotalSize>=0){//剩余空间比文件总大小要大(可以等于,因为还留有5%的剩余空间)
$("#zhegai").show();//遮盖层
$("#msgDiv").show();//稍后框
//从服务器端下载文件
getFileFromServer();
}else{
alert("磁盘空间不够");
return false;
}
}
}
/**
* 该方法用来从服务器上下载文件
* **/
var xh=null;
function getFileFromServer(){
var url="MainServlet?time="+new Date().getTime();
xh = InitAjax();
xh.onreadystatechange = getReady;
xh.open("GET", url, true);
xh.send();
}
//获取XMLHttpRequest对象
function InitAjax(){
var ajax=null;
if(window.ActiveXObject){
var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];
try {
for(var i=0; i <versions.length; i++) {
ajax = new ActiveXObject(versions[i]);
if(ajax) {return ajax;}
}
}catch(e){}
}else if(window.XMLHttpRequest) {
ajax = new XMLHttpRequest();
}
return ajax;
}
//该方法用来下载文件
function getReady() {
if(xh.readyState == 4){
if(xh.status == 200 || xh.status == 0) {
var fileName = fileIsExists(currentDisk.Path);
saveFile(fileName);//保存文件到本地
return true;
}else{return false;}
}else {return false;}
}
//该方法将文件下载到本地
function saveFile(tofile) {
var objStream;
var imgs;
imgs = xh.responseBody;
objStream = new ActiveXObject("ADODB.Stream");
objStream.Type = 1;
objStream.open();
objStream.write(imgs);
//将文件流保存到指定目录
objStream.SaveToFile(tofile);
//检测文件是否下载完毕
downloadFinish(tofile);
}
/**
* 该方法用来判断文件给定的文件目录对应的文件是否存在,若存在则重新命名文件名称并判断是否存在,若还是存在,则继续重命名,否则返回文件名称
* @param systemPath:盘符根目录
* */
function fileIsExists(systemPath){
var count = 1;//用来计数
var date = new Date();
var fileName = date.getFullYear()+""+(date.getMonth()+1)+""+date.getDate();
var filespec = systemPath+"\\"+"下载文件("+fileName+").zip";
if(fso==null){fso=new ActiveXObject("Scripting.FileSystemObject");}
while(fso.FileExists(filespec)){//文件存在
count++;
filespec = systemPath+"\\"+"下载文件("+fileName+")("+count+").zip";
}
return filespec;
}
/**
* 该方法用来判断文件是否下载完成
* @param downFile:需要进行判断的文件
* ***/
function downloadFinish(downFile){
//alert("文件路径:"+downFile);
if(fso==null){fso=new ActiveXObject("Scripting.FileSystemObject");}
if(!fso.FileExists(downFile)){//不存在,也就是还没有下载完成
downInterval = window.setInterval("downloadFinish(downFile)",tt2);//3秒判断一次重复加载
}else{//已经存在,也就是下载完成了
clearInterval(downInterval);//清除定时器
window.setTimeout(function(){//3秒之后关闭
//alert("下载完成");//需要添加定时自动关闭弹出框的功能
$("#msgDiv").hide();//提示“正在下载”的弹出框关闭
$("#closeDiv").show();//显示下载完成提示框
downInterval = window.setTimeout("closeDiv()",5000);//若是不手动关闭,那么3秒后自动关闭
},tt2);
}
}
/**
* 点击“关闭弹出框”中的[x]时触发该事件,该事件用来关闭弹出层
* */
function closeDiv(){
$("#closeDiv").hide();//下载完成提示框
$("#zhegai").hide();//遮盖层
clearInterval(downInterval);//清除定时器
window.location.href="login.jsp";//跳转到首页
}
注: 在创建ActiveXObject的时候,可能会碰到“automation服务器不能创建对象”的问题,大家可以去网上搜一下解决办法,也可以参考这里。
3、服务器端处理请求的servlet代码:
//1、查找要下载的文件
List<SFile> fileList = services.getFileList();//下载所有的文件
if(fileList!=null && fileList.size()>1){//最后一个为文件总大小
//2、添加压缩包信息
String zipName = System.currentTimeMillis()+"";//以当前时间为名称
String zipFilePath = com.tzj.tsp.util.WebAppConfig.app("zipPath");
if(zipFilePath==null || zipFilePath.trim().length()<=0){//说明没有设置值
zipFilePath = request.getRealPath(""+java.io.File.separator+"")+"zip";
}
zipFilePath =zipFilePath+java.io.File.separator+zipName;
File zip = new File(zipFilePath);
if(!zip.isDirectory()){//指定目录不存在则新建
zip.mkdir();
}
//3、将文件拷贝到压缩包中
File fileLoad = null;
File toLoadFile = null;//复制的文件
SFile file = null;//要复制的文件
for(int i=0;i<fileList.size()-1;i++){
file = fileList.get(i);
fileLoad = new File(file.getFilePath());
//System.out.println((i+1)+"、"+fileLoad);
//确保文件存在再添加
if(fileLoad.exists() && fileLoad.isFile()){
toLoadFile = new File(zip+java.io.File.separator+file.getFileName());
//System.out.println(toLoadFile);
toLoadFile = renameFile(toLoadFile);
FileUtils.copyFile(fileLoad,toLoadFile);//将fileLoad复制到压缩文件夹中
}
}
//4、打压缩包
File zipFile = new File(zipFilePath+".zip");
compress(zipFilePath,zipFile);
//5、提供下载
fileDown(zipFile,response);
zipFile.delete();//5、删除文件
FileUtils.deleteDirectory(zip);//删除目录
}
/**
* 该方法用来文件重命名
* @param renameFile:要进行重命名的文件
* **/
private File renameFile(File renameFile){
//该文件在指定的文件夹中不存在了,则退出循环
int count=1;
String filePath = "";//文件路径
String fileName="";//文件名称
int index=0;
while(renameFile.exists()){
count++;
fileName = renameFile.getName();
index = fileName.lastIndexOf(".");
filePath = renameFile.getParent()+File.separator+fileName.substring(0,index)+"("+count+")."+fileName.substring(index);
renameFile = new File(filePath);
}
return renameFile;
}
/**
* 打压缩包
* @param srcPathName:需要打成压缩包的文件夹路径
* @param zipFile:压缩包名称(路径+名称+.+后缀名)
* */
public void compress(String srcPathName,File zipFile) {
File srcdir = new File(srcPathName);
if (!srcdir.exists()){
throw new RuntimeException(srcPathName + "不存在!");
}
if(zipFile.exists()){//说明当前目录下存在同名压缩文件
zipFile.delete();
}
Project prj = new Project();
Zip zip = new Zip();
zip.setEncoding("GBK");//设置编码,防止压缩文件名字乱码,还有被压缩文件的乱码
zip.setProject(prj);
zip.setDestFile(zipFile);
FileSet fileSet = new FileSet();
fileSet.setProject(prj);
fileSet.setDir(srcdir);
zip.addFileset(fileSet);
zip.execute(); //执行生成
}
/**
* 进行下载
* @param file:File对象,需要进行下载的对象
* */
public void fileDown(File downFile,HttpServletResponse response){
try{
if (!downFile.exists())
throw new Exception("没有找到您需要的资源:" + downFile.getName()+"!");
FileInputStream in = new FileInputStream(downFile);
response.setHeader("Content-Disposition","attachment;filename="+ new String(downFile.getName().getBytes("GBK"),"ISO-8859-1"));
OutputStream outputStream = response.getOutputStream();
int i = 0;
byte b[] = new byte[1024];
while ((i = in.read(b)) != -1) {//读取ZIP文件
outputStream.write(b, 0, i);//写入到页面提供下载
}
outputStream.flush();
outputStream.close();
outputStream=null;
response.flushBuffer();
}catch(Exception e){
e.printStackTrace();
}
}

本文介绍了如何使用JavaScript实现从服务器自动下载文件到本地的流程。包括点击下载按钮触发的事件处理,涉及到的遮罩层、文件下载提示框和下载完成的弹出框的使用。同时,提到了在处理过程中可能遇到的问题,如'automation服务器不能创建对象',并给出了参考解决方案和服务器端的servlet代码处理请求。
3835

被折叠的 条评论
为什么被折叠?



