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
;
}
//
-->
查看全文
相关阅读:
Linux 普通用户su命令切换控制
Linux上的文件管理类命令(2)
系统内存管理
ssh 安全配置
redhat系统安装部署
Unity截屏
Unity场景道具模型拓展自定义编辑器
Unity优化之减少Drawcall
Unity安卓连接profile调试
Unity游戏数据用Json保存
原文地址:https://www.cnblogs.com/ding0910/p/1103486.html
最新文章
设计模式的认识
php的一些简单算法程序(冒泡、快速等)
interface与抽象类
PHP memcache扩展安装 for Windows
php 笔试面试 总结
mysql 存储引擎学习
一路踩过的坑 php
cookie与session的区别与联系
mysql优化方法
DataList分页访问FooterTemplate模板里的控件
热门文章
ASP.NET三层架构之不确定查询参数个数的查询
关于ASP.NET的“Forms身份验证”
刚刚开通博客,分享Asp.Net的GridView的基本用法
Linux 练习题(2)
bash的工作特性(2)
DS4700存储日志收集
redhat 6.4 双网卡绑定
华为RH8100V3RAID 10配置
请列出你在从事IT生涯中,最难以忘怀的一次误操作
Redhat YUM U盘源配置
Copyright © 2011-2022 走看看