多文件上傳并預(yù)覽
利用input 的type='file" 可以實(shí)現(xiàn)文件的上傳煤辨，不過只支持單個文件上傳。只有給input加上multiple屬性才能實(shí)現(xiàn)多個文件同時上傳木张。
好了众辨，下面我們來實(shí)現(xiàn)一個簡單的多圖片上傳并預(yù)覽的例子
<div class="input-file-box">
<span>點(diǎn)擊上傳圖片</span>
<input type="file" name="" id="uploadfile" multiple>
</div>
<div id="img-box"></div>
1
2
3
4
5
這是html結(jié)構(gòu)，di=img-box的盒子是后面放預(yù)覽圖片的舷礼。
下面是js代碼：
window.onload=function(){
var input=document.getElementById("uploadfile");
var div;
// 當(dāng)用戶上傳時觸發(fā)事件
input.onchange=function(){
readFile(this);
}
//處理圖片并添加都dom中的函數(shù)
var readFile=function(obj){
// 獲取input里面的文件組
var fileList=obj.files;
//對文件組進(jìn)行遍歷鹃彻，可以到控制臺打印出fileList去看看
for(var i=0;i<fileList.length;i++){
var reader= new FileReader();
reader.readAsDataURL(fileList[i]);
// 當(dāng)文件讀取成功時執(zhí)行的函數(shù)
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
接下來分析下實(shí)現(xiàn)步驟，具體來看下readFile（）函數(shù)
首先我們先獲取用戶上傳的的文件
// 獲取input里面的文件組
var fileList=obj.files;
1
2
obj.files返回一個FileList對象妻献，該對象里面有很多屬性蛛株，比如我上傳兩個圖片，控制臺打印如下console.log(fileList);
可以看到有有兩個File育拨，下標(biāo)分別為0,1谨履，長度length為2。點(diǎn)擊其中一個File展開可以看到更多詳細(xì)的信息
lastModified和lastModifiedDate代表文件的上次修改時間至朗，返回的格式不一樣
name：文件名屉符，只讀
size：文件大小剧浸，單位是字節(jié)锹引，只讀
type：文件MIME類型矗钟，只讀
（ 利用size屬性判斷可以控制上傳的文件大小，type可以控制上傳的類型嫌变，上面FileList的length可以控制上傳的數(shù)量 ）
接下來我們對文件進(jìn)行遍歷吨艇，進(jìn)入for循環(huán)，首先實(shí)例化一個FileReader接口
var reader= new FileReader();
1
FileReader接口提供讀取文件的方法和事件
主要的方法有：
FileReader.readAsBinaryString(blob/file) // 以二進(jìn)制格式讀取文件內(nèi)容
FileReader.readAsText(file, [encoding]) // 以文本(及字符串)格式讀取文件內(nèi)容腾啥，并且可以強(qiáng)制選擇文件編碼
FileReader.readAsDataURL(file) // 以DataURL格式讀取文件內(nèi)容
FileReader.abort() // 終止讀取操作
主要的事件有：
FileReader.onloadstart // 讀取操作開始時觸發(fā)
FileReader.onload // 讀取操作成功時觸發(fā)
FileReader.onloadend // 讀取操作完成時觸發(fā)(不論成功還是失敗)
FileReader.onprogress // 讀取操作過程中觸發(fā)
FileReader.onabort // 讀取操作被中斷時觸發(fā)
FileReader.onerror // 讀取操作失敗時觸發(fā)
然后以DataURl格式去讀取當(dāng)前圖片
reader.readAsDataURL(fileList[i]);
1
當(dāng)文件讀取成功時進(jìn)入.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
首先創(chuàng)建一個div和img东涡，然后把它渲染到我們預(yù)留的盒子里去，并加載到頁面中顯示圖片倘待。
這里的 this.result 獲取文件讀取的結(jié)果疮跑，也可以用e.target.result。把結(jié)果放在img的src中凸舵。（注意看清楚那些引號）
此時就可以看到上傳的圖片被渲染到頁面中了祖娘。
修改樣式
多文件上傳預(yù)覽算是完成了，不過原生文件上傳的樣式并不太好看啊奄，如何修改樣式呢渐苏，基本做法就是：在input外層套一個div，然后把input的寬高設(shè)為100%菇夸，并把透明度變?yōu)?琼富，然后直接對外層div修改樣式就可以了。
舉個栗子庄新，這個最終的樣式效果圖
還是上面那個html結(jié)構(gòu)
<div class="input-file-box">
<span>點(diǎn)擊上傳圖片</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
完成鞠眉，文中如有錯誤，望大神指點(diǎn)~
————————————————
版權(quán)聲明：本文為CSDN博主「呂大瓜」的原創(chuàng)文章择诈，遵循CC 4.0 by-sa版權(quán)協(xié)議凡蚜，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_42490398/article/details/83904815
