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
;
}
//
-->
查看全文
相关阅读:
【转】网页窗口DIV自定义拖动
【转】js获取当前日期时间“yyyy-MM-dd HH:MM:SS”
JQuery基本知识、选择器、事件、DOM操作、动画
LinQ高级查询、组合查询、IQueryable集合类型
使用LinQ进行增删改查
【转】html之file标签 --- 图片上传前预览 -- FileReader
钢城干洗中心智能管理系统
HTTP状态码
HTTP报文内的HTTP信息
HTTP协议中概念
原文地址:https://www.cnblogs.com/ding0910/p/1103486.html
最新文章
ECSHOP(3.0.0升级3.6.0)帮助教程
ECSHOP v3.0 数据库字典
api.besttool.cn 相关接口的返回码code含义列表
违章代码查询接口
微信小程序通讯录首字母索引效果,车辆品牌选择列表
根据车辆品牌获取品牌所属公司,车标logo,创建年份等基本信息
微信H5支付常见问题汇总
ThinkPHP出现General error: 2006 MySQL server has gone away的解决方法
thinkphp 3.2.3 addAll方法的坑
网页截图API接口,一键自动生成网页截图
热门文章
微信小程序全面实战,架构设计 && 躲坑攻略(小程序入门捷径教程)
小程序1月9号将上线,官方详解七大能力
张小龙首次全面阐述小程序,定档1月9日上线(内附演讲全文)
mac使用笔记
免费的SSL证书,免费为微信小程序搭建https
微信小程序开发公测,小程序账号申请办法攻略
List泛型集合转DataTable
【转】Winform Socket通信
【转】使用DataConnectionDialog在运行时设置数据源连接字符串
【转】C#操作xml
Copyright © 2011-2022 走看看