upload

多文件上传并预览

利用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>
1
2
3
4
5
这是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);
}
}
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
接下来分析下实现步骤，具体来看下readFile（）函数
首先我们先获取用户上传的的文件

// 获取input里面的文件组
var fileList=obj.files;
1
2
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();
1
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]);
1
当文件读取成功时进入.onload()事件

reader.onload=function(e){
div=document.createElement('div');
div.innerHTML='<img src="'+this.result+'" />';
document.getElementById("img-box").appendChild(div);
}
1
2
3
4
5
首先创建一个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>
1
2
3
4
5
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
完成，文中如有错误，望大神指点~
————————————————
版权声明：本文为CSDN博主「吕大瓜」的原创文章，遵循CC 4.0 by-sa版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_42490398/article/details/83904815