使用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>

相关文章

  • javascript点击按钮实现隐藏显示切换效果

    javascript点击按钮实现隐藏显示切换效果

    这篇文章主要介绍了javascript点击按钮实现隐藏显示切换效果,以一个完整的实例为大家分析了js点击按钮实现隐藏显示切换的功能,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • 红黑树的插入详解及Javascript实现方法示例

    红黑树的插入详解及Javascript实现方法示例

    这篇文章主要给大家介绍了关于红黑树的插入的相关资料,以及Javascript实现的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起看看吧。
    2018-03-03
  • 动态调用CSS文件的JS代码

    动态调用CSS文件的JS代码

    动态调用CSS文件,一般用于页面的多种颜色选择,通过调用不同的css实现不用的页面颜色效果。
    2010-07-07
  • js实现滑动滑块验证登录

    js实现滑动滑块验证登录

    这篇文章主要为大家详细介绍了js实现滑动滑块验证登录,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • 关于延迟加载JavaScript

    关于延迟加载JavaScript

    当一个网站有很多js代码要加载,js代码放置的位置在一定程度上将会影像网页的加载速度,为了让我们的网页加载速度更快,本文总结了一下几个注意点,分享给大家
    2015-05-05
  • 浅谈javascript 函数属性和方法

    浅谈javascript 函数属性和方法

    这篇文章主要介绍了浅谈javascript 函数属性和方法的相关资料,需要的朋友可以参考下
    2015-01-01
  • select隐藏选中值对应的id,显示其它id的简单实现方法

    select隐藏选中值对应的id,显示其它id的简单实现方法

    下面小编就为大家带来一篇select隐藏选中值对应的id,显示其它id的简单实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • javascript正则表达式模糊匹配IP地址功能示例

    javascript正则表达式模糊匹配IP地址功能示例

    这篇文章主要介绍了javascript正则表达式模糊匹配IP地址功能,结合简单实例形式演示了JS模糊匹配IP地址的实现方法,涉及针对数字及字符串的相关正则判定与匹配操作技巧,需要的朋友可以参考下
    2017-01-01
  • IE6下通过a标签点击切换图片的问题

    IE6下通过a标签点击切换图片的问题

    IE6已经让人恶心很久了, Google旗下Youtube决定在3月13日起停止对IE6的支持. 但愿能加速IE6更换的速度.
    2010-11-11
  • javascript组合使用构造函数模式和原型模式实例

    javascript组合使用构造函数模式和原型模式实例

    这篇文章主要介绍了javascript组合使用构造函数模式和原型模式的方法,通过一个简单实例分析了javascript构造函数模式与原型模式的使用方法,需要的朋友可以参考下
    2015-06-06

最新评论