使用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 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
jquery.validate使用攻略 第二部
Jul 01 Javascript
javascript格式化日期时间方法汇总
Jun 19 Javascript
JS中多种方式创建对象详解
Mar 22 Javascript
js 判断一组日期是否是连续的简单实例
Jul 11 Javascript
Bootstrap模态框调用功能实现方法
Sep 19 Javascript
bootstrap读书笔记之CSS组件(上)
Oct 17 Javascript
vue.js父组件使用外部对象的方法示例
Apr 25 Javascript
微信小程序如何获知用户运行小程序的场景教程
May 17 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
浅谈JS中的反柯里化( uncurrying)
Aug 17 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 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+mysql来做一个功能强大的在线计算器
2010/10/12 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
php函数指定默认值方法的小例子
2013/12/04 PHP
php数组键值用法实例分析
2015/02/27 PHP
PHP CURL 多线程操作代码实例
2015/05/13 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
详解JavaScript中双等号引起的隐性类型转换
2016/05/30 Javascript
jQuery简单注册和禁用全局事件的方法
2016/07/25 Javascript
文件上传,iframe跨域数据提交的实现
2016/11/18 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
jQuery实现图片简单轮播功能示例
2018/08/13 jQuery
js实现录音上传功能
2019/11/22 Javascript
[02:47]DOTA2英雄基础教程 野性怒吼兽王
2013/12/05 DOTA
Python的设计模式编程入门指南
2015/04/02 Python
python根据日期返回星期几的方法
2015/07/06 Python
两个命令把 Vim 打造成 Python IDE的方法
2016/03/20 Python
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python实现模拟登录网易邮箱的方法示例
2018/07/05 Python
Flask-Mail用法实例分析
2018/07/21 Python
一百行python代码将图片转成字符画
2021/02/19 Python
Python3+Appium实现多台移动设备操作的方法
2019/07/05 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
通过Turtle库在Python中绘制一个鼠年福鼠
2020/02/03 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
三方股东合作协议书范本
2014/09/28 职场文书
2015年安全保卫工作总结
2015/05/14 职场文书
2020年个人安全保证书参考模板
2020/01/08 职场文书
MySQL表字段数量限制及行大小限制详情
2022/07/23 MySQL