html5多图片同时上传,HTML5连续上传图片

/*

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("p_w_picpath") == 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

{

Li[i].onmouseover=function()

{

this.lastChild.style.display='block';

this.lastChild.onclick=function()

{

this.parentNode.parentNode.removeChild(this.parentNode);

var a=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)

{

var arr=[];

for(var i=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是对象，不是数组

var that=this;

var formData = new FormData();  //这是HTML5的上传，能够上传图片和文字

var aaaa

//这一步，把所有的this.array都转换为二维数组,例file1,file2,file3,方便最后一步全部上传，不用每循环一次就上传一次

for (var i = 0, file; file = this.array[i]; i++) {

formData.append("file"+i,file); //要加i否则就会被覆盖，只有最后一个值

//aaaa=i;console.log(i);

}

aaaa=aaaa+1;

var xhr = new XMLHttpRequest();

//这这部分是显示上传进度条的

xhr.upload.onprogress=function(evt)

{

var lod=evt.loaded;   //已经上传的大小

var to=evt.total;   //总的大小

var per=Math.floor(((lod/to))*100)+"%";

that.tishi.style.display='block';

that.tishi.innerHTML='你上传了'+(aaaa*Math.floor(((lod/to))))+'张照片；'+'已经上传'+per;

if(per=='100%')

{

var Li=that.show.childNodes;

for(var i=0;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组合，一般和开始的数组不一样

*/

}

}

这是调用的

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

}

);

}

上传图片

开始上传

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