HTML5連續(xù)上傳圖片

/*
by 的雨
time:2016/11/17
*/
function update_object()
{
	//這是在實(shí)例化的時(shí)候，同時(shí)調(diào)用int方法
	this.int.apply(this,arguments);
}
//這是原型鏈 == 一個(gè)對(duì)象
update_object.prototype={
	int:function(options)
	{
		//這是接收從調(diào)用的時(shí)候傳過(guò)來(lái)參數(shù)
		this.CC=options.CC;
		this.tishi=options.tishi;
		this.BB=options.BB;
		this.show=options.show;
		this.myfile=options.myfile;
		this.array=[];
		var that=this;
		this.btn=options.btn;
		this.myfile.onchange=function()   //input發(fā)生改變的時(shí)候觸發(fā)（onchange事件）
		{
			//第一步驟，這個(gè)步驟是找到file，即上傳的文件
			var files = this.files;
			/*
			concat() 方法用于連接兩個(gè)或多個(gè)數(shù)組。 把that.filter(files)添加到that.array，這樣that.array就會(huì)不斷的保存file數(shù)組
			該方法不會(huì)改變現(xiàn)有的數(shù)組，而僅僅會(huì)返回被連接數(shù)組的一個(gè)副本。
			*/
			that.array=that.array.concat(that.filter(files));
			that.Index();
			return this;
		}
		//這是點(diǎn)擊上傳的步驟
		this.btn.onclick=function(e)
		{
			that.array;
			var e=e||event;
			e.preventDefault();
			//點(diǎn)擊的同時(shí)調(diào)用上傳的方法
			that.upload();
		}
		
	},
	//第二步驟，這是過(guò)濾file的步驟，這一步在concat之前就調(diào)用
	filter: function(files) {	
		var arrFiles=[];
		for (var i = 0, file; file = files[i]; i++) {
			if (file.type.indexOf("p_w_picpath") == 0) {
				//if (file.size >= 512000) {
				////	alert('您這張"'+ file.name +'"圖片大小過(guò)大，應(yīng)小于500k');	
				//} else {
					arrFiles.push(file);	
				//}			
			} else {
				alert('文件"' + file.name + '"不是圖片。');	
			}
		}
		return arrFiles	;
	},
	//第三步驟，這是為每個(gè)file添加索引,在concat連接之后調(diào)用，把之前的this.array的內(nèi)容改變了
	Index: function() {
		
		for (var i = 0, file; file = this.array[i]; i++) {
			//增加唯一索引值
			file.index = i;
		}
		//這里的this.array已經(jīng)有索引
		this.onSelect(this.array);
		return this;
	},
	//第四步驟，是生成img預(yù)覽和刪除預(yù)覽
	onSelect: function(files) {
		var that=this;
		var html = '', i = 0;
		
		//動(dòng)態(tài)創(chuàng)建img和li
		var show1 = function() 
		{
			
			file = files[i];
			
			if (file){
				//var reader = new FileReader()
				var URL=window.URL.createObjectURL(file)
				//reader.onload = function(e) 
				//{
					html+='<li ><div id="jindu">上傳成功</div><img id="pic_' + i + '" src='+URL+'><span id="name_'+ i +'" class="upload_append_list">'+file.name+'</span><a href="#" id="del" title="刪除" index="'+ i +'">×</a></li>';
					//console.log(file);
					i++;
					show1();
					that.show.style.display='block';
					that.show.innerHTML=html;	
					
				//}
				//reader.readAsDataURL(file);e.target.result
			} 
		};
		show1();
		
		//這是刪除預(yù)覽，同時(shí)把已經(jīng)刪除的file的索引傳到下一個(gè)數(shù)組
		var del=function()
		{
			if (this.show.hasChildNodes()) {
			var Li=this.show.getElementsByTagName('li');
			var length=this.show.childNodes.length;
			for(var i=0;i<length;i++)
			{
				
				Li[i].onmouseover=function()
				{
					this.lastChild.style.display='block';
					this.lastChild.onclick=function()
					{
						this.parentNode.parentNode.removeChild(this.parentNode);
						var a=this.getAttribute("index"); //這一步找到索引，因?yàn)閒ile和a索引都是一樣，找到a等于找到file
						that.picdelete(files[a]);  //這部分已經(jīng)是刪除的file，傳遞到下一個(gè)數(shù)組
					}
				}	
				
				Li[i].onmouseout=aa=function()
			{
				
				this.lastChild.style.display='none';
				
			}	
			}	
			}	
		}
		del();
	},
	//第五步驟，這是刪除選擇的file的步驟
	picdelete:function(a)
	{
		
		var arr=[];
		for(var i=0,file;file=this.array[i];i++)
		{
			if(a!==file) //遍歷this.array找到和a相同的，就不要把它保存到數(shù)組
			{
				arr.push(file);
			}
		}
		this.array=arr;  //把最后的file對(duì)象內(nèi)容重新賦值給this.array（已不是剛開(kāi)始的那個(gè)值）
		
	},
	//第六步驟，這是上傳的
	upload:function()
	{
		//this.array是對(duì)象，不是數(shù)組
		var that=this; 
		var formData = new FormData();  //這是HTML5的上傳，能夠上傳圖片和文字
		var aaaa
		//這一步，把所有的this.array都轉(zhuǎn)換為二維數(shù)組,例file1,file2,file3,方便最后一步全部上傳，不用每循環(huán)一次就上傳一次
		for (var i = 0, file; file = this.array[i]; i++) {
			formData.append("file"+i,file);	 //要加i否則就會(huì)被覆蓋，只有最后一個(gè)值
			//aaaa=i;console.log(i);
		}
		
			aaaa=aaaa+1;
			 var xhr = new XMLHttpRequest();
			 //這這部分是顯示上傳進(jìn)度條的
			xhr.upload.onprogress=function(evt)
			{
				var lod=evt.loaded;   //已經(jīng)上傳的大小
				var to=evt.total;   //總的大小
				var per=Math.floor(((lod/to))*100)+"%";
				that.tishi.style.display='block';
				that.tishi.innerHTML='你上傳了'+(aaaa*Math.floor(((lod/to))))+'張照片；'+'已經(jīng)上傳'+per;
				if(per=='100%')
				{
					var Li=that.show.childNodes;
					for(var i=0;i<Li.length;i++)
					{
						Li[i].firstChild.style.display='block';
						Li[i].onmouseover=function()
						{
							this.lastChild.style.display='none';	
						}
					}
				}
			}
			//接收后臺(tái)返回來(lái)的數(shù)據(jù)
        	xhr.onreadystatechange = function(){
            if(xhr.readyState==4&&xhr.status==200){
               console.log(xhr.responseText)
            }
       		 }
        	xhr.open('POST','check.php',true);
        	//xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
        	xhr.send(formData);
			//傳過(guò)去的值，用$_FILES接受，相當(dāng)于直接表單提交
	/*
	步驟
	1，先找到file文件，過(guò)濾后用新的數(shù)組連接成一個(gè)數(shù)組
	2，為每個(gè)file添加一個(gè)i值。就是索引；
	3，從得到索引的file遍歷處理，動(dòng)態(tài)創(chuàng)建img
	4，刪除事件，把選擇刪除的file傳遞到下一級(jí)
	5，重新組合file組合，重新遍歷，不保存上級(jí)帶有刪除的file
	6，最后得到的是確定要上傳的file組合，一般和開(kāi)始的數(shù)組不一樣
	
	*/
	}
}

  這是調(diào)用的

<script>
window.onload=function()
{
	var CC=document.getElementById('cc');
	var BB=document.getElementById('bb');
	var tishi=document.getElementById('tishi');
	var show=document.getElementById('show');
	var myfile=document.getElementById('myfile');
	var btn=document.getElementById('submit');
	var update=new update_object(
	{
		CC:CC,
		BB:BB,
		tishi:tishi,
		show:show,
		myfile:myfile,
		btn:btn
	}
	);
	
}
</script>

<form action="check.php"  method="post" enctype="multipart/form-data">
<div id="aa">

	<div id=bb>
    <label>
    	<div id="cc" title="上傳圖片">上傳圖片</div>
        <input type="file" id="myfile" name='name[]' accept="p_w_picpath/jpeg,p_w_picpath/jpg,p_w_picpath/png,p_w_picpath/gif"   multiple='true'> 
     </label>
    </div> 
    <div id="size">
    <div  id="tishi">
    </div>
    <label>
    <div id="begin">開(kāi)始上傳</div>
    <input id='submit' type="submit"  value="">
    </label>
    </div>
    <ul id="show">
    </ul>
</div>
<input id='submit' type="submit" value="提交">
</form>

 個(gè)人是新手，所以寫(xiě)的代碼不規(guī)范，還請(qǐng)多多包涵。我也是在網(wǎng)上找了很久，找不到全是純JavaScript寫(xiě)的，所以想把這篇，讓新手學(xué)習(xí)。