前端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>

这是html结构，di=img-box的盒子是后面放预览图片的。
下面是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;

obj.files返回一个FileList对象，该对象里面有很多属性，比如我上传两个图片，控制台打印如下console.log(fileList);
在这里插入图片描述
可以看到有有两个File，下标分别为0,1，长度length为2。点击其中一个File展开可以看到更多详细的信息

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

（利用size属性判断可以控制上传的文件大小，type可以控制上传的类型，上面FileList的length可以控制上传的数量）

接下来我们对文件进行遍历，进入for循环，首先实例化一个FileReader接口

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);
}

首先创建一个div和img，然后把它渲染到我们预留的盒子里去，并加载到页面中显示图片。
这里的 this.result 获取文件读取的结果，也可以用e.target.result。把结果放在img的src中。（注意看清楚那些引号）
此时就可以看到上传的图片被渲染到页面中了。

修改样式

多文件上传预览算是完成了，不过原生文件上传的样式并不太好看，如何修改样式呢，基本做法就是：在input外层套一个div，然后把input的宽高设为100%，并把透明度变为0，然后直接对外层div修改样式就可以了。

举个栗子，这个最终的样式效果图
在这里插入图片描述
还是上面那个html结构

<div class="input-file-box">
	<span>点击上传图片</span>
	<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></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;
}

完成，文中如有错误，望大神指点~