HTML5连续上传图片

发布时间:2019-03-13 整理:脚本之家 作者:未知
脚本之家收集整理的这篇文章主要介绍了HTML5连续上传图片脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随脚本之家小编过来看看吧!
/*
by的雨
time:2016/11/17
*/
functionupdate_object()
{
	//这是在实例化的时候,同时调用int方法
	this.int.apply(this,arguments);
}
//这是原型链==一个对象
update_object.prototype={
	int:function(options)
	{
		//这是接收从调用的时候传过来参数
		this.CC=options.CC;
		this.tishi=options.tishi;
		this.BB=options.BB;
		this.show=options.show;
		this.myfile=options.myfile;
		this.array=[];
		varthat=this;
		this.btn=options.btn;
		this.myfile.onchange=function()//input发生改变的时候触发(onchange事件)
		{
			//第一步骤,这个步骤是找到file,即上传的文件
			varfiles=this.files;
			/*
			concat()方法用于连接两个或多个数组。把that.filter(files)添加到that.array,这样that.array就会不断的保存file数组
			该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。
			*/
			that.array=that.array.concat(that.filter(files));
			that.Index();
			returnthis;
		}
		//这是点击上传的步骤
		this.btn.onclick=function(e)
		{
			that.array;
			vare=e||event;
			e.preventDefault();
			//点击的同时调用上传的方法
			that.upload();
		}
		
	},//第二步骤,这是过滤file的步骤,这一步在concat之前就调用
	filter:function(files){	
		vararrFiles=[];
		for(vari=0,file;file=files[i];i++){
			if(file.type.indexOf("image")==0){
				//if(file.size>=512000){
				////	alert('您这张"'+file.name+'"图片大小过大,应小于500k');	
				//}else{
					arrFiles.push(file);	
				//}			
			}else{
				alert('文件"'+file.name+'"不是图片。');	
			}
		}
		returnarrFiles	;
	},//第三步骤,这是为每个file添加索引,在concat连接之后调用,把之前的this.array的内容改变了
	Index:function(){
		
		for(vari=0,file;file=this.array[i];i++){
			//增加唯一索引值
			file.index=i;
		}
		//这里的this.array已经有索引
		this.onSelect(this.array);
		returnthis;
	},//第四步骤,是生成img预览和删除预览
	onSelect:function(files){
		varthat=this;
		varhtml='',i=0;
		
		//动态创建img和li
		varshow1=function()
		{
			
			file=files[i];
			
			if(file){
				//varreader=newFileReader()
				varURL=window.URL.createObjectURL(file)
				//reader.onload=function(e)
				//{
					html+='<li><divid="jindu">上传成功</div><imgid="pic_'+i+'"src='+URL+'><spanid="name_'+i+'"class="upload_append_list">'+file.name+'</span><ahref="#"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();
		
		//这是删除预览,同时把已经删除的file的索引传到下一个数组
		vardel=function()
		{
			if(this.show.hasChildNodes()){
			varLi=this.show.getElementsByTagName('li');
			varlength=this.show.childNodes.length;
			for(vari=0;i<length;i++)
			{
				
				Li[i].onmouseover=function()
				{
					this.lastChild.style.display='block';
					this.lastChild.onclick=function()
					{
						this.parentNode.parentNode.removeChild(this.parentNode);
						vara=this.getAttribute("index");//这一步找到索引,因为file和a索引都是一样,找到a等于找到file
						that.picdelete(files[a]);//这部分已经是删除的file,传递到下一个数组
					}
				}	
				
				Li[i].onmouseout=aa=function()
			{
				
				this.lastChild.style.display='none';
				
			}	
			}	
			}	
		}
		del();
	},//第五步骤,这是删除选择的file的步骤
	picdelete:function(a)
	{
		
		vararr=[];
		for(vari=0,file;file=this.array[i];i++)
		{
			if(a!==file)//遍历this.array找到和a相同的,就不要把它保存到数组
			{
				arr.push(file);
			}
		}
		this.array=arr;//把最后的file对象内容重新赋值给this.array(已不是刚开始的那个值)
		
	},//第六步骤,这是上传的
	upload:function()
	{
		//this.array是对象,不是数组
		varthat=this;
		varformData=newFormData();//这是html5的上传,能够上传图片和文字
		varaaaa
		//这一步,把所有的this.array都转换为二维数组,例file1,file2,file3,方便最后一步全部上传,不用每循环一次就上传一次
		for(vari=0,file;file=this.array[i];i++){
			formData.append("file"+i,file);	//要加i否则就会被覆盖,只有最后一个值
			//aaaa=i;console.log(i);
		}
		
			aaaa=aaaa+1;
			varxhr=newXMLHttpRequest();
			//这这部分是显示上传进度条的
			xhr.upload.onprogress=function(evt)
			{
				varlod=evt.loaded;//已经上传的大小
				varto=evt.total;//总的大小
				varper=Math.floor(((lod/to))*100)+"%";
				that.tishi.style.display='block';
				that.tishi.innerHTML='你上传了'+(aaaa*Math.floor(((lod/to))))+'张照片;'+'已经上传'+per;
				if(per=='100%')
				{
					varLi=that.show.childNodes;
					for(vari=0;i<Li.length;i++)
					{
						Li[i].firstChild.style.display='block';
						Li[i].onmouseover=function()
						{
							this.lastChild.style.display='none';	
						}
					}
				}
			}
			//接收后台返回来的数据
	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);
			//传过去的值,用$_FILES接受,相当于直接表单提交
	/*
	步骤
	1,先找到file文件,过滤后用新的数组连接成一个数组
	2,为每个file添加一个i值。就是索引;
	3,从得到索引的file遍历处理,动态创建img
	4,删除事件,把选择删除的file传递到下一级
	5,重新组合file组合,重新遍历,不保存上级带有删除的file
	6,最后得到的是确定要上传的file组合,一般和开始的数组不一样
	
	*/
	}
}

这是调用的

<script>
window.onload=function()
{
	varCC=document.getElementById('cc');
	varBB=document.getElementById('bb');
	vartishi=document.getElementById('tishi');
	varshow=document.getElementById('show');
	varmyfile=document.getElementById('myfile');
	varbtn=document.getElementById('submit');
	varupdate=newupdate_object(
	{
		CC:CC,BB:BB,tishi:tishi,show:show,myfile:myfile,btn:btn
	}
	);
	
}
</script>
<formaction="check.php"method="post"enctype="multipart/form-data">
<divid="aa">

	<divid=bb>
<label>
	<divid="cc"title="上传图片">上传图片</div>
<inputtype="file"id="myfile"name='name[]'accept="image/jpeg,image/jpg,image/PNG,image/gif"style="display:none"multiple='true'>
</label>
</div>
<divid="size">
<divid="tishi">
</div>
<label>
<divid="begin">开始上传</div>
<inputid='submit'type="submit"style="display:none"value="">
</label>
</div>
<ulid="show">
</ul>
</div>
<inputid='submit'type="submit"value="提交">
</form>

个人是新手,所以写的代码不规范,还请多多包涵。我也是在网上找了很久,找不到全是纯javascript写的,所以想把这篇,让新手学习。

总结

以上是脚本之家为你收集整理的HTML5连续上传图片全部内容,希望文章能够帮你解决HTML5连续上传图片所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。