使用JS进行目录上传（相当于批量上传）
更新时间：2010年12月05日 16:30:04 作者：
脚本使用了WScript.Shell和Scripting.FileSystemObject的组件，所以必须要在IE下面和打开安全选项中运行； 另外还用到了Jquery. 代码只是客户端代码， 至于服务器的接收代码网上好多了
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>测试文件上传</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(function(){
//ShowFolderFileList("D:\\CodeNet\\web\\Images\\shopTemplets");
});
function ShowFolderFileList(FilePath){
var fso, f, fc, sf;
fso = new ActiveXObject("Scripting.FileSystemObject");
try{
f = fso.GetFolder(FilePath);
}catch(err){
alert("文件路径错误或者不存在!!");
return false;
}
// 列出所有文件
fc = new Enumerator(f.files);
var fileName = "";
for(;!fc.atEnd();fc.moveNext()){
fileName=fc.item().Name;
$('<div filePath="' + FilePath + fileName + '" uploadState="wait">' + FilePath + fileName + '</div>').appendTo('#showArea');
}
// 循环 递归 读取 文件夹的文件
sf = new Enumerator(f.SubFolders);
var folderName = "";
for(;!sf.atEnd();sf.moveNext()){
folderName = sf.item().Name;
ShowFolderFileList(FilePath + folderName + "/");
}
}
function startUpload(){
var s = $('#uploaddir').val().replace( /\\/gi, '/' ) ;
if(s.substring(s.length - 1 , s.length) != '/'){
s += '/'
}
ShowFolderFileList(s)
uploadFile();
}
// 上传
function uploadFile(){
if($('#showArea div[uploadState=wait]').length > 0){
var thisNode = $('#showArea div[uploadState=wait]').eq(0)
var WshShell=new ActiveXObject("WScript.Shell");
$('#fileupload').focus();
WshShell.SendKeys($(thisNode).attr('filePath')); // 路径中不有是中文
uploadForm.submit();
$('#fileupload').focus();
$('#fileupload').get(0).createTextRange().select();
WshShell.SendKeys('{del}');
var dotStr = '.';
$('<span></span>').appendTo(thisNode).css('color', 'green');
var uploadState = setInterval(function(){
if($(thisNode).attr('uploadState') == 'ok'){
clearInterval(uploadState);
$(thisNode).find('span').css('color', 'red').text('(完成)');
uploadFile();
}else{
if(dotStr.length > 15){ dotStr = '.'; }else{ dotStr += '.'; }
$(thisNode).find('span').text('(上传中' + dotStr + ')');
}
}, 1000);
}
}
// 在iframe 的返回页面中调用此函数 即可实现循环上传，，否则为死循环
function uploadFinish(){
$('#showArea div[uploadState=wait]').eq(0).attr('uploadState', 'ok');
}
</script>
<style type="text/css">
body,td,th {
font-family: "微软雅黑", Tahoma, Helvetica, Arial, \5b8b\4f53, sans-serif;
}
</style>
</head>
<body>
<form action="/a.html" method="post" name="loginForm" style="margin:0 0; padding:0 0;">
<input name="uploaddir" id="uploaddir" type="text" value="D:\a" style="width:800px;" />
<input type="button" value="开始" id="startIt" name="startIt" onclick="javascript:startUpload();"/>
</form>
<form action="/index/upload" method="post" name="uploadForm" enctype="multipart/form-data" target="hidden_frame">
<input type="file" name="fileupload" id="fileupload" />
<iframe name='hidden_frame' id="hidden_frame" style='display:none'></iframe>
</form>
</iframe>
<div id="showArea">
</div>
</body>
</html>
相关文章
这篇文章主要为大家详细介绍了createObjectURL方法实现本地图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
这篇文章主要介绍了JavaScript设计模式之命令模式,结合实例形式分析了javascript命令模式的概念、原理、用法及相关注意事项,需要的朋友可以参考下2019-01-01
动态生成的IFRAME，设置SRC时的，不同位置带来的影响。 以下所说的是在IE7下运行的。IE6下也是同样。 在这个blog中，直接点击运行代码，和把下面代码保存到为网页在运行（以本地文件或域名访问），效果不一样。2008-03-03
Javascript 代码也可以变得优美的一些经验小结。2009-06-06
这篇文章主要为大家详细介绍了微信小程序实现侧边栏分类，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-10-10
用.为对象添加属性，用关键字delete删除属性，下面为大家介绍下对象属性的添加和删除,需要的朋友可以参考下2014-05-05
javascript点击按钮需求，在项目开发过程中经常遇到，本文通过一段代码给大家分享javascript代码判断点击第几个按钮，对本文感兴趣的朋友一起学习吧2015-12-12
JavaScript 模式之工厂模式(Factory)应用介绍
工厂模式也是对象创建模式之一，它通常在类或类的静态方法中去实现,本文将详细介绍JavaScript 工厂模式2012-11-11
这篇文章主要为大家详细介绍了JavaScript中操作本地存储的相关知识,文中的示例代码讲解详细,具有一定的借鉴价值,有需要的小伙伴可以参考一下2025-01-01
这篇文章主要介绍了JavaScript Array对象基本方法详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
最新评论