HTML5连续上传图片

abstract：/* by 的雨 time:2016/11/17 */ function update_object() { //这是在实例化的时候，同时调用int方法 this.int.apply(this,arguments); } //这是原型链 == 一个对象 updat
/* by 的雨 time:2016/11/17 */ function update_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=[]; var that=this; this.btn=options.btn; this.myfile.onchange=function() //input发生改变的时候触发（onchange事件） { //第一步骤，这个步骤是找到file，即上传的文件 var files = this.files; /* concat() 方法用于连接两个或多个数组。 把that.filter(files)添加到that.array，这样that.array就会不断的保存file数组 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。 */ that.array=that.array.concat(that.filter(files)); that.Index(); return this; } //这是点击上传的步骤 this.btn.onclick=function(e) { that.array; var e=e||event; e.preventDefault(); //点击的同时调用上传的方法 that.upload(); } }, //第二步骤，这是过滤file的步骤，这一步在concat之前就调用 filter: function(files) { var arrFiles=[]; for (var i = 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 + '"不是图片。'); } } return arrFiles ; }, //第三步骤，这是为每个file添加索引,在concat连接之后调用，把之前的this.array的内容改变了 Index: function() { for (var i = 0, file; file = this.array[i]; i++) { //增加唯一索引值 file.index = i; } //这里的this.array已经有索引 this.onSelect(this.array); return this; }, //第四步骤，是生成img预览和删除预览 onSelect: function(files) { var that=this; var html = '', i = 0; //动态创建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+='上传成功
'+file.name+'×
'; //console.log(file); i++; show1(); that.show.style.display='block'; that.show.innerHTML=html; //} //reader.readAsDataURL(file);e.target.result } }; show1(); //这是删除预览，同时把已经删除的file的索引传到下一个数组 var del=function() { if (this.show.hasChildNodes()) { var Li=this.show.getElementsByTagName('li'); var length=this.show.childNodes.length; for(var i=0;i
       这是调用的
       
           上传图片
   
   
  开始上传
   
  
 
  
       个人是新手，所以写的代码不规范，还请多多包涵。我也是在网上找了很久，找不到全是纯JavaScript写的，所以想把这篇，让新手学习。
       
        WeChat
        share
HTML5连续上传图片

Popular Entries
