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
;
}
//
-->
查看全文
相关阅读:
他山之石____集合框架__【List,Set,Map之间的区别】
集合框架__【泛型】
集合框架__【Set集合】【HashSet】【TreeSet】
模式串匹配,KMP算法——HDU1686
模式串匹配,KMP算法——HDU1711
网络最大流——POJ
网络最大流——HDU
拓扑排序——CodeForces-645D
二分图染色,二分图匹配——HDU
二分图匹配,最小点覆盖——POJ
原文地址:https://www.cnblogs.com/ding0910/p/1103486.html
最新文章
Jquery 回调函数队列的相关文章
Jquery select和cheeck篇
JSON.stringify() 将数组转化成字符串;
jQuery 事件委托(上级节点——下级节点)
ajax回调函数回调无法获取返回值
Xftp
Tomcat启动配置
杨辉三角
递归实现两两交换链表中的节点
移除链表元素
热门文章
反转链表
删除链表中的节点
排序算法-选择排序
常用设计模式__之【装饰设计模式】
IO流__【概述】【字符文件的读写和复制】【字符流缓冲区】
其它常用API__【System】【Runntime】【Date】【Math】等
集合框架__JDK1.5新特性__【增强for循环】【可变参数】【静态导入】
集合框架__【Collections工具类】【Arrays工具类】
Test__Map练习__【TreeMap对象操作】【TreeMap字符串操作】【Map扩展】
集合框架__【Map集合】【keySet】【entrySet】【Map.Entry】
Copyright © 2011-2022 走看看