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

upload_modified

This commit is contained in:
Joe 2017-01-03 14:24:56 +08:00
parent 1ce357fb20
commit 8c17fc4c32
1 changed files with 73 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
多图片上传.html
View File

@ -1,47 +1,67 @@
<HTML>
<HEAD>
</HEAD>
<BODY>
<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="#">
</form>
<input type="submit" value="上传">
<script type="text/javascript">
var pic_num = 0,pic_maxnum = 5; // 用来动态生成span,upfile的id,一次上传图片数量接口
function addAttachmentToList()
{
if (findAttachment(event.srcElement.value)){
if(findAttachment(event.srcElement.value)){
var o = G('pics').getElementsByTagName('input');
var len = o.length-1;
G('pics').removeChild(o[len]);
pic_num--;
return;
}; //如果此文档已在图片列表中则不再添加
if (extractFileName(event.srcElement.value)){
if(extractFileName(event.srcElement.value)){
// 动态创建图片信息栏并添加到图片列表中
var span = document.createElement('span');
span.id = '_attachment' + pic_num;
span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + (pic_num++) + ')">删除</a><br/>';
span.innerHTML = extractFileName(event.srcElement.value) + '&nbsp;<a href="javascript:delAttachment(' + pic_num + ')">删除</a><br/>';
span.title = event.srcElement.value;
G('attachmentList').appendChild(span);
}
}
// 显示图片列表并变换添加图片按钮文本
if (G('attachmentList').style.display == 'none')
{
G('btnAdd').value = '继续添加';
G('attachmentList').style.display = '';
G('btnClear').style.display = '';
}
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
if(G('attachmentList').getElementsByTagName('span').length > 0)
{
G('btnAdd').value = '继续添加';
G('attachmentList').style.display = '';
G('btnClear').style.display = '';
}
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
}
function selectAttachment()
{
// 先清除无效动态生成的多余upfile
cleanInvalidUpfile();
if(pic_num < pic_maxnum ) {//图片数量控制
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+pic_num+'">';// 动态创建上传控件并与span对应
pic_num++;
if(pic_num <= pic_maxnum ) {//图片数量控制
var upfile = '<input type="file" style="display:none" onchange="addAttachmentToList();" id="_upfile'+ pic_num +'">';// 动态创建上传控件并与span对应
G('pics').insertAdjacentHTML('beforeEnd', upfile);
G('_upfile'+pic_num).click();
var o = G('pics').getElementsByTagName('input');
alert(o.length);
var tick=setTimeout(function(){
var m = G('attachmentList').getElementsByTagName('span');
if(o.length > m.length){
var len = o.length-1;
G("pics").removeChild(o[len]);
}
},1000*5);
}
else {
alert("一次只能上传"+pic_maxnum+"张图片！");
return ;
}
else alert("一次只能上传"+pic_maxnum+"张图片！");
}
//判断图片格式
@ -52,7 +72,7 @@ function extractFileName(fn)
return fn.substr(fn.lastIndexOf('\\')+1);
}
else{
alert("请上传png或jpg格式的图片！");
("请上传png或jpg格式的图片！");
return 0;
}
@ -60,23 +80,27 @@ function extractFileName(fn)
function findAttachment(fn)
{
var o = G('attachmentList').getElementsByTagName('span');
for(var i=0;i<o.length;i++)
if (o[i].title == fn) return true;
else return false;
var o = G('attachmentList').getElementsByTagName('span');
for(var i=0;i<o.length;i++){
if (o[i].title == fn) {
return true;
}
}
return false;
}
function delAttachment(id)
{
G('attachmentList').removeChild(G('_attachment'+id));
G('pics').removeChild(G('_upfile'+id));
// 当图片列表为空则不显示并且变化添加图片按钮文本
if (G('attachmentList').childNodes.length == 0)
{
G('btnAdd').value = '添加图片';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('attachmentList').removeChild(G('_attachment'+id));
G('pics').removeChild(G('_upfile'+id));
pic_num--;
// 当图片列表为空则不显示并且变化添加图片按钮文本
if (G('attachmentList').childNodes.length == 0)
{
G('btnAdd').value = '添加图片';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
}
G('total').innerText = '当前选择上传'+ G('attachmentList').childNodes.length + '个图片';
@ -91,42 +115,34 @@ function cleanInvalidUpfile()
{
if (!G('_attachment'+o[i].id.substr(7)))
G('pics').removeChild(o[i]);
pic_num--;
}
}
}
function clearAttachment()
{
var o = G('attachmentList').childNodes;
for(var i=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]);
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)
{
G('pics').removeChild(o[i]);
}
G('btnAdd').value = '添加图片';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('total').innerText = '当前选择上传0个图片';
var o = G('attachmentList').childNodes;
for(var i=o.length-1;i>=0;i--)
G('attachmentList').removeChild(o[i]);
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)
{
G('pics').removeChild(o[i]);
}
pic_num=0;
G('btnAdd').value = '添加图片';
G('attachmentList').style.display = 'none';
G('btnClear').style.display = 'none';
G('total').innerText = '当前选择上传0个图片';
}
function G(id)
{
return document.getElementById(id);
}
</script>
</HEAD>
<BODY>
<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>