前端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='+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展开可以看到更多详细的信息
前端H5实现多图片上传并预览_第1张图片

  • 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='+this.result+'" />';
		document.getElementById("img-box").appendChild(div);
}

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

修改样式

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

举个栗子,这个最终的样式效果图
前端H5实现多图片上传并预览_第2张图片
还是上面那个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;
}

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

你可能感兴趣的:(JavaScript)