使用JS进行目录上传(相当于批量上传)


Posted in Javascript onDecember 05, 2010
<!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 相关文章推荐
一样的table?不一样的table(可编辑状态table)
Sep 19 Javascript
jquery控制display属性为none或block
Mar 31 Javascript
最流行的Node.js精简型和全栈型开发框架介绍
Feb 26 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
AngularJS 中文API参考手册
Jul 28 Javascript
深入理解Javascript中的观察者模式
Feb 20 Javascript
基于layer.js实现收货地址弹框选择然后返回相应的地址信息
May 26 Javascript
解决vue router使用 history 模式刷新后404问题
Jul 19 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
vue同个按钮控制展开和折叠同个事件操作
Jul 29 Javascript
js对象的构造和继承实现代码
Dec 05 #Javascript
收集的一些Array及String原型对象的扩展实现代码
Dec 05 #Javascript
script标签的 charset 属性使用说明
Dec 04 #Javascript
本地对象Array的原型扩展实现代码
Dec 04 #Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 #Javascript
jQuery)扩展jQuery系列之一 模拟alert,confirm(一)
Dec 04 #Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 #Javascript
You might like
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
PHP转换文件夹下所有文件编码的实现代码
2013/06/06 PHP
php获取文件夹路径内的图片以及分页显示示例
2014/03/11 PHP
php设计模式之委托模式
2016/02/13 PHP
thinkPHP连接sqlite3数据库的实现方法(附Thinkphp代码生成器下载)
2016/05/27 PHP
js监听输入框值的即时变化onpropertychange、oninput
2011/07/13 Javascript
Jquery中删除元素的实现代码
2011/12/29 Javascript
jQuery动态创建html元素的常用方法汇总
2014/09/05 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
2015/01/28 Javascript
windows下安装nodejs及框架express
2015/08/07 NodeJs
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
bootstrap select插件封装成Vue2.0组件
2017/04/17 Javascript
Node.js中,在cmd界面,进入退出Node.js运行环境的方法
2018/05/12 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
layui表格分页 记录勾选的实例
2019/09/02 Javascript
vue实现评论列表功能
2019/10/25 Javascript
[04:28]DOTA2亚洲邀请赛小组赛第五日 TOP10精彩集锦
2015/02/03 DOTA
Python socket网络编程TCP/IP服务器与客户端通信
2017/01/05 Python
详解tensorflow实现迁移学习实例
2018/02/10 Python
python/sympy求解矩阵方程的方法
2018/11/08 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
Python实现最常见加密方式详解
2019/07/13 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
keras使用Sequence类调用大规模数据集进行训练的实现
2020/06/22 Python
浅析Python中字符串的intern机制
2020/10/03 Python
Python图像读写方法对比
2020/11/16 Python
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
Lime Crime官网:美国一家主打梦幻精灵系的彩妆品牌
2019/03/22 全球购物
关于运动会的稿件
2014/02/02 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
常务副总经理岗位职责
2014/04/12 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
交通事故和解协议书
2015/01/27 职场文书
2015年学校保卫部工作总结
2015/05/11 职场文书
深度好文:50条没人告诉你的人生经验,句句精辟
2019/08/22 职场文书