From 8c17fc4c320d9eeb31cb55077fe0a49bea3512a0 Mon Sep 17 00:00:00 2001
From: Joe <820839844@qq.com>
Date: Tue, 3 Jan 2017 14:24:56 +0800
Subject: [PATCH] upload_modified

---
 多图片上传.html | 130 +++++++++++++++++++++++++++---------------------
 1 file changed, 73 insertions(+), 57 deletions(-)
diff --git a/多图片上传.html b/多图片上传.html
index 24fd16d..e033c7c 100644
--- a/多图片上传.html
+++ b/多图片上传.html
@@ -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>
\ No newline at end of file
