前端H5实现多图片上传并预览

利用input 的type='file" 可以实现文件的上传，不过只支持单个文件上传。只有给input加上multiple属性才能实现多个文件同时上传。
<div class="input-file-box">
	<span>点击上传图片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>
js代码
window.onload=function(){
	var input=document.getElementById("uploadfile");
	var div;
	// 当用户上传时触发事件
	input.onchange=function(){
		readFile(this);
	}
	//处理图片并添加都dom中的函数
	var readFile=function(obj){
		// 获取input里面的文件组
		var fileList=obj.files;
		//对文件组进行遍历，可以到控制台打印出fileList去看看
		for(var i=0;i<fileList.length;i++){
			var reader= new FileReader();
			reader.readAsDataURL(fileList[i]);
			 // 当文件读取成功时执行的函数
			reader.onload=function(e){
				div=document.createElement('div');
				div.innerHTML='<img src="'+this.result+'" />';
				document.getElementById("img-box").appendChild(div);
			}
		}
	}
}
接下来分析下实现步骤，具体来看下readFile（）函数
首先我们先获取用户上传的的文件
// 获取input里面的文件组
var fileList=obj.files;
var reader= new FileReader();
FileReader接口提供读取文件的方法和事件
主要的方法有：

FileReader.readAsBinaryString(blob/file) // 以二进制格式读取文件内容
FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式读取文件内容，并且可以强制选择文件编码
FileReader.readAsDataURL(file) // 以DataURL格式读取文件内容
FileReader.abort() // 终止读取操作
主要的事件有：

FileReader.onloadstart // 读取操作开始时触发
FileReader.onload // 读取操作成功时触发
FileReader.onloadend // 读取操作完成时触发(不论成功还是失败)
FileReader.onprogress // 读取操作过程中触发
FileReader.onabort // 读取操作被中断时触发
FileReader.onerror // 读取操作失败时触发
然后以DataURl格式去读取当前图片

reader.readAsDataURL(fileList[i]);
当文件读取成功时进入.onload()事件
reader.onload=function(e){
		div=document.createElement('div');
		div.innerHTML='<img src="'+this.result+'" />';
		document.getElementById("img-box").appendChild(div);
}
css
/*外层div*/
.input-file-box{
	border: 1px solid gray;
    width: 150px;
    height: 150px;
    position: relative;
    text-align: center;
    border-radius: 8px;
}
/*文字描述*/
.input-file-box > span{
	display: block;
    width: 100px;
    height: 30px;
    position: absolute;
    top: 0px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    color: gray;
}
/*input框*/
.input-file-box #uploadfile{
	opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

lastModified和lastModifiedDate代表文件的上次修改时间，返回的格式不一样
name：文件名，只读
size：文件大小，单位是字节，只读
type：文件MIME类型，只读