/*
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+=‘<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();
//这是删除预览，同时把已经删除的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<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"); //这一步找到索引，因为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.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()
{
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="image/jpeg,image/jpg,image/png,image/gif" style=" display:none" multiple=‘true‘> </label> </div> <div id="size"> <div id="tishi"> </div> <label> <div id="begin">开始上传</div> <input id=‘submit‘ type="submit" style="display:none" value=""> </label> </div> <ul id="show"> </ul> </div> <input id=‘submit‘ type="submit" value="提交"> </form>
个人是新手，所以写的代码不规范，还请多多包涵。我也是在网上找了很久，找不到全是纯JavaScript写的，所以想把这篇，让新手学习。
本文出自 “11037915” 博客，请务必保留此出处http://11047915.blog.51cto.com/11037915/1874039
原文地址：http://11047915.blog.51cto.com/11037915/1874039
