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