搬過來一個老文。
多圖上傳在各個網(wǎng)站都是個很常見的功能，對于剛?cè)腴T前端不久的新人來說，網(wǎng)上插件一大堆，隨便拿來就能用是個正解。菜鳥的我喜歡折騰，閑來無事，自己寫個玩玩。
去原文看看
先來復(fù)習(xí)幾個小知識
FileReader:
FileReader主要用于將文件內(nèi)容讀入內(nèi)存，通過一系列異步接口，可以在主線程中訪問本地文件。
使用FileReader對象，web應(yīng)用程序可以異步的讀取存儲在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。
創(chuàng)建實(shí)例:
var reader = new FileReader();
方法:
abort():void 終止文件讀取操作
readAsArrayBuffer(file):void 異步按字節(jié)讀取文件內(nèi)容，結(jié)果用ArrayBuffer對象表示
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)讀取操作被中止時調(diào)用
onerror 當(dāng)讀取操作發(fā)生錯誤時調(diào)用
onload 當(dāng)讀取操作成功完成時調(diào)用
onloadend 當(dāng)讀取操作完成時調(diào)用,不管是成功還是失敗
onloadstart 當(dāng)讀取操作將要開始之前調(diào)用
onprogress 在讀取數(shù)據(jù)過程中周期性調(diào)用
有點(diǎn)神奇了，然后了解一下base64
百度百科上的解釋
Base64是網(wǎng)絡(luò)上最常見的用于傳輸8Bit字節(jié)碼的編碼方式之一，Base64就是一種基于64個可打印字符來表示二進(jìn)制數(shù)據(jù)的方法?？刹榭碦FC2045～RFC2049，上面有MIME的詳細(xì)規(guī)范。
Base64編碼是從二進(jìn)制到字符的過程，可用于在HTTP環(huán)境下傳遞較長的標(biāo)識信息。例如，在Java Persistence系統(tǒng)Hibernate中，就采用了Base64來將一個較長的唯一標(biāo)識符（一般為128-bit的UUID）編碼為一個字符串，用作HTTP表單和HTTP GET URL中的參數(shù)。在其他應(yīng)用程序中，也常常需要把二進(jìn)制數(shù)據(jù)編碼為適合放在URL（包括隱藏表單域）中的形式。此時，采用Base64編碼具有不可讀性，需要解碼后才能閱讀。
有點(diǎn)不知所云，簡單來說，base64就是一大串不可讀字符串，將圖片文件直接轉(zhuǎn)為base64，就可以將圖片以文本的方式直接傳給后臺。
說說實(shí)現(xiàn)原理
有了上面的復(fù)習(xí)，多圖片上傳似乎有了點(diǎn)眉目。
1.用戶每上傳一次圖片，就將這張圖片轉(zhuǎn)化為base64，放進(jìn)數(shù)組
2.提交的時候把數(shù)組當(dāng)做普通數(shù)據(jù)直接傳到后臺
<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)讀取操作成功完成時將圖片放進(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>
