HTML5连续上传图片

2024-12-20 技术教程

/*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("p_w_picpath")==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和livarshow1=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等于找到filethat.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遍历处理，动态创建img4，删除事件，把选择删除的file传递到下一级5，重新组合file组合，重新遍历，不保存上级带有删除的file6，最后得到的是确定要上传的file组合，一般和开始的数组不一样*/}}

这是调用的

<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="p_w_picpath/jpeg,p_w_picpath/jpg,p_w_picpath/png,p_w_picpath/gif"multiple='true'></label></div><divid="size"><divid="tishi"></div><label><divid="begin">开始上传</div><inputid='submit'type="submit"value=""></label></div><ulid="show"></ul></div><inputid='submit'type="submit"value="提交"></form>

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