p91207356
/
guoren
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

图片上传控制

This commit is contained in:
Joe 2016-12-27 13:12:20 +08:00
parent 7b6f27aebf
commit 3704a84439
2 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
guoren

@ -1 +1 @@
Subproject commit c5cbe7128fa23d7524fb13e47a067abd53f3e093 Subproject commit 25c738414d33d2202fce85a6f596486c78a03283

50
多图片上传.html
View File

@ -1,15 +1,15 @@
<HTML> <HTML>
<HEAD> <HEAD>
<script type="text/javascript"> <script type="text/javascript">
var i = 0; // 用来动态生成span,upfile的id var pic_num = 0; // 用来动态生成span,upfile的id,一次上传图片数量
function addAttachmentToList() function addAttachmentToList()
{ {
if (findAttachment(event.srcElement.value)) return; //如果此文档已在图片列表中则不再添加 if (findAttachment(event.srcElement.value)) return; //如果此文档已在图片列表中则不再添加
if (extractFileName(event.srcElement.value)){ if (extractFileName(event.srcElement.value)){
// 动态创建图片信息栏并添加到图片列表中 // 动态创建图片信息栏并添加到图片列表中
var span = document.createElement('span'); var span = document.createElement('span');
span.id = '_attachment' + i; span.id = '_attachment' + pic_num;
span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (i++) + ')"><font color="blue">删除</font></a><br/>'; span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (pic_num++) + ')">删除</a><br/>';
span.title = event.srcElement.value; span.title = event.srcElement.value;
G('attachmentList').appendChild(span); G('attachmentList').appendChild(span);
} }
@ -30,11 +30,13 @@ function selectAttachment()
{ {
// 先清除无效动态生成的多余upfile // 先清除无效动态生成的多余upfile
cleanInvalidUpfile(); cleanInvalidUpfile();
if(pic_num <3) {// 动态创建上传控件并与span对应
// 动态创建上传控件并与span对应 var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+pic_num+'">';
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+i+'">'; G('pics').insertAdjacentHTML('beforeEnd', upfile);
document.body.insertAdjacentHTML('beforeEnd', upfile); G('_upfile'+pic_num).click();
G('_upfile'+i).click(); }
else alert("一次只能上传3张图片！");
} }
//判断图片格式 //判断图片格式
function extractFileName(fn) function extractFileName(fn)
@ -55,13 +57,13 @@ function findAttachment(fn)
var o = G('attachmentList').getElementsByTagName('span'); var o = G('attachmentList').getElementsByTagName('span');
for(var i=0;i<o.length;i++) for(var i=0;i<o.length;i++)
if (o[i].title == fn) return true; if (o[i].title == fn) return true;
return false; else return false;
} }
function delAttachment(id) function delAttachment(id)
{ {
G('attachmentList').removeChild(G('_attachment'+id)); G('attachmentList').removeChild(G('_attachment'+id));
document.body.removeChild(G('_upfile'+id)); G('pics').removeChild(G('_upfile'+id));
// 当图片列表为空则不显示并且变化添加图片按钮文本 // 当图片列表为空则不显示并且变化添加图片按钮文本
if (G('attachmentList').childNodes.length == 0) if (G('attachmentList').childNodes.length == 0)
@ -78,11 +80,11 @@ function cleanInvalidUpfile()
{ {
var o = document.body.getElementsByTagName('input'); var o = document.body.getElementsByTagName('input');
for(var i=o.length-1;i>=0;i--) for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{ {
if (!G('_attachment'+o[i].id.substr(7))) if (!G('_attachment'+o[i].id.substr(7)))
document.body.removeChild(o[i]); G('pics').removeChild(o[i]);
} }
} }
function clearAttachment() function clearAttachment()
@ -95,7 +97,7 @@ function clearAttachment()
for(var i=o.length-1;i>=0;i--) for(var i=o.length-1;i>=0;i--)
if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0) if (o[i].type == 'file' && o[i].id.indexOf('_upfile') == 0)
{ {
document.body.removeChild(o[i]); G('pics').removeChild(o[i]);
} }
G('btnAdd').value = '添加图片'; G('btnAdd').value = '添加图片';
@ -111,14 +113,12 @@ function G(id)
</script> </script>
</HEAD> </HEAD>
<BODY> <BODY>
<fieldset style="border:1px solid;text-align:left;FONT-SIZE:12px;font-family: Verdana;padding:5px;"> <input type="button" value="添加图片" id="btnAdd" onclick="selectAttachment()">
<form action="#"> <input type="button" value="清空图片" id="btnClear" style="display:none" onclick="clearAttachment()">
<input type="button" value="添加图片" id="btnAdd" onclick="selectAttachment();">&nbsp; <div id="attachmentList" style="display:none"></div>
<input type="button" value="清空图片" id="btnClear" style="display:none" onclick="clearAttachment();"> <div id="total">当前选择上传0个图片</div>
<div id="attachmentList" style="margin:3px 0px 0px 0px;padding:4px 3px 4px 3px;display:none;border:1px solid "></div> <form id='pics' action="#">
<div id="total" style="margin:3px 0px 0px 0px;">当前选择上传0个图片</div> <div><input type="submit" value="上传"></div>
<div style="padding：10px 3px"><input type="submit" value="上传"></div> </form>
</form>
</BODY> </BODY>
</HTML> </HTML>