/*
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=http://www.mamicode.com/‘+URL+‘>
  这是调用的
<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="http://www.mamicode.com/提交">
</form>
 个人是新手，所以写的代码不规范，还请多多包涵。我也是在网上找了很久，找不到全是纯JavaScript写的，所以想把这篇，让新手学习。
本文出自 “11037915” 博客，请务必保留此出处http://11047915.blog.51cto.com/11037915/1874039
HTML5连续上传图片