搬過(guò)來(lái)一個(gè)老文他挎。
多圖上傳在各個(gè)網(wǎng)站都是個(gè)很常見的功能筝尾，對(duì)于剛?cè)腴T前端不久的新人來(lái)說(shuō)，網(wǎng)上插件一大堆办桨，隨便拿來(lái)就能用是個(gè)正解筹淫。菜鳥的我喜歡折騰，閑來(lái)無(wú)事呢撞，自己寫個(gè)玩玩损姜。
去原文看看
先來(lái)復(fù)習(xí)幾個(gè)小知識(shí)
FileReader:
FileReader主要用于將文件內(nèi)容讀入內(nèi)存，通過(guò)一系列異步接口殊霞，可以在主線程中訪問(wèn)本地文件摧阅。
使用FileReader對(duì)象，web應(yīng)用程序可以異步的讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容绷蹲，可以使用File對(duì)象或者Blob對(duì)象來(lái)指定所要處理的文件或數(shù)據(jù)棒卷。
創(chuàng)建實(shí)例:
var reader = new FileReader();
方法:
abort():void 終止文件讀取操作
readAsArrayBuffer(file):void 異步按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對(duì)象表示
readAsBinaryString(file):void 異步按字節(jié)讀取文件內(nèi)容瘸右，結(jié)果為文件的二進(jìn)制串
readAsDataURL(file):void 異步讀取文件內(nèi)容娇跟，結(jié)果用data:url的字符串形式表示
readAsText(file,encoding):void 異步按字符讀取文件內(nèi)容，結(jié)果用字符串形式表示
事件:
onabort 當(dāng)讀取操作被中止時(shí)調(diào)用
onerror 當(dāng)讀取操作發(fā)生錯(cuò)誤時(shí)調(diào)用
onload 當(dāng)讀取操作成功完成時(shí)調(diào)用
onloadend 當(dāng)讀取操作完成時(shí)調(diào)用,不管是成功還是失敗
onloadstart 當(dāng)讀取操作將要開始之前調(diào)用
onprogress 在讀取數(shù)據(jù)過(guò)程中周期性調(diào)用
有點(diǎn)神奇了太颤，然后了解一下base64
百度百科上的解釋
Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一苞俘，Base64就是一種基于64個(gè)可打印字符來(lái)表示二進(jìn)制數(shù)據(jù)的方法×湔拢可查看RFC2045～RFC2049吃谣，上面有MIME的詳細(xì)規(guī)范乞封。
Base64編碼是從二進(jìn)制到字符的過(guò)程，可用于在HTTP環(huán)境下傳遞較長(zhǎng)的標(biāo)識(shí)信息岗憋。例如肃晚，在Java Persistence系統(tǒng)Hibernate中，就采用了Base64來(lái)將一個(gè)較長(zhǎng)的唯一標(biāo)識(shí)符（一般為128-bit的UUID）編碼為一個(gè)字符串仔戈，用作HTTP表單和HTTP GET URL中的參數(shù)关串。在其他應(yīng)用程序中，也常常需要把二進(jìn)制數(shù)據(jù)編碼為適合放在URL（包括隱藏表單域）中的形式监徘。此時(shí)晋修，采用Base64編碼具有不可讀性，需要解碼后才能閱讀凰盔。
有點(diǎn)不知所云墓卦，簡(jiǎn)單來(lái)說(shuō)，base64就是一大串不可讀字符串户敬，將圖片文件直接轉(zhuǎn)為base64落剪，就可以將圖片以文本的方式直接傳給后臺(tái)。
說(shuō)說(shuō)實(shí)現(xiàn)原理
有了上面的復(fù)習(xí)尿庐，多圖片上傳似乎有了點(diǎn)眉目忠怖。
1.用戶每上傳一次圖片，就將這張圖片轉(zhuǎn)化為base64抄瑟，放進(jìn)數(shù)組
2.提交的時(shí)候把數(shù)組當(dāng)做普通數(shù)據(jù)直接傳到后臺(tái)
<style>
*{
padding:0;
margin:0;
}
body{
background:#eee;
}
.wrapper-upload{
width:500px;
height:400px;
margin: 100 auto;
box-shadow: 0 0 5px #ccc;
border-radius: 10px;
background-color: #fff;
position: relative;
overflow: hidden;
}
.wrapper-upload input[type=file]{
display: none;
}
.file-list ul{
list-style: none;
text-align: center;
margin-top:10px;
}
.file-list li{
width:130px;
height:100px;
display: inline-block;
overflow: hidden;
border-radius: 5px;
margin:5px;
box-shadow: 0 0 5px #000;
position:relative;
transition: all 1s ease;
}
.file-list li img.imgs{
height:100px;
}
.file-list li img.btn-del{
position:absolute;
left:50%;
top:0;
transform: translate(-50%,-50%);
width:30px;
opacity: 0;
transition: all .5s ease;
z-index: 3;
cursor: pointer;
}
.file-list li:hover img.imgs{
opacity: .6;
}
.file-list li:hover img.btn-del{
opacity: 1;
top:50%;
display: block;
}
.btn-upload{
position: absolute;
bottom:10px;
left:50%;
display: block;
padding: 0;
width: 90px;
height: 30px;
background-color: orange;
color: #fff;
font-size: 16px;
font-weight: 600;
text-align: center;
line-height: 30px;
border-radius: 3px;
transform: translate(-50%,0);
cursor: pointer;
}
</style>
<script>
$(function(){
Upload.init();
});
var Upload = {
init: function() {
this.eventChange();
this.deleteImg();
},
arrImg: [], // 已上傳圖片的base64組成數(shù)組
eventChange: function() {
var that = this;
$(document).on('change', '#upload', function(e) {
if (that.arrImg.length >= 9) {
alert('最多上傳9張圖片');
return false;
}
var reader = new FileReader();
var file = event.target.files[0];
// 存在圖片就讀取為base64
if (!file) {
alert('未選擇任何圖片');
}else{
reader.readAsDataURL(file);
}
// 當(dāng)讀取操作成功完成時(shí)將圖片放進(jìn)數(shù)組脑又，然后遍歷出圖片
reader.onload = function (e) {
var imgBase64 = reader.result;
that.arrImg.push(imgBase64);
that.readerImg();
}
});
},
// 圖片遍歷到面板上
readerImg: function() {
var that = this;
var strHtml = '';
for (var i = 0; i < that.arrImg.length; i++) {
strHtml += '<li> <img src="./img/del.svg" data-index="' + i + '" class="btn-del" /> <img class="imgs" src="' + that.arrImg[i] + '"></li>';
}
$('.file-list ul').html(strHtml);
},
// 刪除圖片操作
deleteImg: function() {
var that = this;
$(document).on('click', '.btn-del', function(){
var index = $(this).attr('data-index');
that.arrImg.splice(index, 1);
that.readerImg();
});
}
};
</script>
