zoukankan
html css js c++ java
JS仿网易多附件上传功能
<!--
/**/
/*
----------------------------以下为调用页面必需HTML----------------------------
<style type="text/css">
.NoborderR{background: none;border:none;}
</style>
<script language="javascript" type="text/javascript" src="upload.js"></script>
<div nowrap id="filespan">
<input type="button" onclick="addFile()" value="添加附件" id="btnAdd" />
<div id="divMsg">尚未添加文件
</div>
</div>
------------------------------以上为调用页面必需HTML--------------------------
*/
//
----- Multi Upload Functions -------------------------------------------------
var
isIE
=
(navigator.userAgent.indexOf(
"
MSIE
"
)
!=
-
1
);
var
fileIndex
=
0
;
var
dic
=
new
ActiveXObject(
"
Scripting.Dictionary
"
);
function
addFile()
{
var
obj;
if
(isIE)
{
obj
=
document.createElement(
"
<input type=file id='hdnFile' onchange='getValue(this.value);' style='display:none' />
"
);
}
else
{
obj
=
document.createElement(
"
input
"
);
obj.type
=
"
file
"
;
obj.id
=
"
hdnFile
"
;
obj.setAttribute(
"
style
"
,
"
display:none;
"
,
0
);
obj.setAttribute(
"
onchange
"
,
"
javascript:getValue(this.value);
"
,
0
);
}
document.getElementById(
"
filespan
"
).appendChild(obj);
document.getElementById(
'
hdnFile
'
).click();
//
addInputFile(spanId, fileId);
document.getElementById(
'
divMsg
'
).style.display
=
(dic.Count
>
0
)
?
'
none
'
:
''
;
}
function
addInputFile(spanId, fileId, str)
{
var
span
=
document.getElementById(spanId);
if
(span
!=
null
)
{
//
检测存在性
//
if (dic.Exists(fileId))
if
(valueExists(str))
{
alert(
"
不能重复添加相同文件
"
);
return
false
;
}
var
divObj
=
document.createElement(
"
div
"
), fileObj, delObj;
divObj.id
=
fileId;
divObj.style.height
=
'
22
'
;
var
imgObj, fileObj, delObj;
if
(isIE)
{
imgObj
=
document.createElement(
"
<img src='unknown.gif' />
"
);
fileObj
=
document.createElement(
"
<input type=text readonly>
"
);
delObj
=
document.createElement(
"
<img src='delfile.jpg' onclick=delInputFile('
"
+
spanId
+
"
','
"
+
fileId
+
"
')>
"
);
}
else
{
imgObj
=
document.createElement(
"
img
"
);
imgObj.setAttribute(
"
src
"
,
"
unknown.gif
"
,
0
);
fileObj
=
document.createElement(
"
input
"
);
fileObj.type
=
"
text
"
;
fileObj.setAttribute(
"
readonly
"
,
"
readonly
"
,
0
);
//
fileObj.setAttribute("onchange", "javascript:alert('');", 0);
delObj
=
document.createElement(
"
img
"
);
imgObj.setAttribute(
"
src
"
,
"
delfile.jpg
"
,
0
);
//
delObj.type = "button";
delObj.setAttribute(
"
onclick
"
,
"
delInputFile('
"
+
spanId
+
"
','
"
+
fileId
+
"
')
"
,
0
);
}
fileObj.name
=
fileId;
fileObj.size
=
"
50
"
;
fileObj.value
=
str;
fileObj.className
=
"
NoborderR
"
;
//
delObj.value = "删除";
divObj.appendChild(imgObj);
divObj.appendChild(document.createTextNode(
"
"
));
divObj.appendChild(fileObj);
divObj.appendChild(document.createTextNode(
"
"
));
divObj.appendChild(delObj);
span.appendChild(divObj);
//
数据字典记录
dic.Add(fileId, str);
}
}
function
delInputFile(spanId, fileId)
{
var
span
=
document.getElementById(spanId);
var
divObj
=
document.getElementById(fileId);
if
(span
!=
null
&&
divObj
!=
null
)
{
span.removeChild(divObj);
//
从数据字典移除
dic.Remove(fileId);
document.getElementById(
'
divMsg
'
).style.display
=
(dic.Count
>
0
)
?
'
none
'
:
''
;
}
}
function
getValue(str)
{
var
spanId
=
"
filespan
"
;
var
fileId
=
"
uploadfile
"
+
(fileIndex
++
);
addInputFile(spanId, fileId, str);
document.getElementById(spanId).removeChild(document.getElementById(
'
hdnFile
'
));
}
function
valueExists(str)
{
a
=
(
new
VBArray(dic.Items())).toArray();
//
获取条目。
for
(i
in
a)
//
遍历该 dictionary。
{
if
(a[i]
==
str)
return
true
;
}
return
false
;
}
//
-->
查看全文
相关阅读:
作业任务03
作业任务02
作业任务01
Shell脚本编程01-shell编程与规范与变量
Linux网络服务05-----DNS域名解析服务(二)
Linux网络服务05-----DNS域名解析服务(一)
Linux网络服务13----PXE 高效能批量网络装机
网络基础知识
Nginx 入门
shell 脚本须知
原文地址:https://www.cnblogs.com/ding0910/p/1103486.html
最新文章
Linux根文件系统:/etc/init.d/rcS文件分析
Linux根文件系统:/etc/inittab文件分析
Linux根文件系统:搭建简易的嵌入式Linux根文件系统
Linux根文件系统:Linux文件系统概述
Linux内核分析:uboot与Linux内核机器码分析
FTP服务搭建
DHCP服务搭建
源码编译安装Apache——有图
批量装机实验报告
Centos7通过源码编译的方式安装和配置Apache
热门文章
Nginx Rewrite 域名以及资源重定向
制作nginx的rpm包:
shell 脚本
Nginx配置优化
sed grep awk
脚本创建用户以及删除所创建用户
Linux150个常用命令
作业任务06
作业任务05
作业任务04
Copyright © 2011-2022 走看看