前言
今天我們聊一聊圖片上傳，單張Or多張 ，如今，各大圖片上傳插件數(shù)不勝數(shù)，例如：Jquery的 verupload.js，jQuery File Upload、Uploadify、jQuery.filter等等。But。上面說到的這些插件，今天我們不談，我們來看一看使用HTML5中的FileReader 如何實現(xiàn) 圖片的單張及多張預(yù)覽、刪除、上傳等功能。先看下實現(xiàn)后的效果如下：
2|0實現(xiàn)
2|1前端部分
這塊是用戶點擊按鈕 其中我們最重要的一句話是input type=file 和給了一個multiple屬性，可以滿足多張圖片上傳
<div class="form-group form-row">
<label class="col-sm-2 control-label uText">俱樂部相冊</label><div class="row">
<div class="col-xs-10 col-sm-8 mTop5">
<label title="上傳俱樂部相冊" for="ClubImagesUpload" id="btnClubImg" class="col-sm-2">
<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">
<img src="/Images/registerNewSite/btn_addimg.png" class="addImg"/>
</label>
</div>
</div></div>
下面這塊區(qū)域是用于圖片預(yù)覽的
<div class="form-group form-row" id="preViewMore"><div class="row">
<div class="col-xs-9">
<div id="clubInputImagePreview" class="col-sm-9 img-preview img-preview-sm"></div>
</div>
</div></div>
2|2樣式部分
什么？連樣式你都要看，還有沒有人性(苦笑臉)
2|3Js部分
首先我們分析下上面的html，我們用一個label把input和一個img標(biāo)簽包起來了，我們希望點擊效果圖那個+號圖片，就能彈出選擇相片的對話框，所以，我們需要先給label來一個點擊事件：
$("#btnClubImg").click(function() {
//TODO Something
});
接著我們再看，因為我們是要獲取上傳的文件，而我們的文件主要是在input上，所以，我們先將input標(biāo)簽獲取到：
$("#btnClubImg").click(function() {
var $input = $("#ClubImagesUpload");
console.log($input);//打印當(dāng)前元素
});
我們將當(dāng)前input元素標(biāo)簽打印出來看看是個什么東東
我們展開第一項會發(fā)現(xiàn)files里面length長度是0
好，我們繼續(xù)分析，因為我們想要能當(dāng)input框改變的時候，說簡單點 就是有選擇到文件的時候，我們能獲取到當(dāng)前選擇的文件，這個和獲取input框文字輸入是一樣的道理，所以，經(jīng)過分析，我們知道需要給input標(biāo)簽加一個change事件：
$("#btnClubImg").click(function() {
var $input = $("#ClubImagesUpload");
console.log($input);
$input.on("change", function () {
console.log(this);//打印改變后的當(dāng)前元素
});
});
讓我們來瞄一眼，獲取到改變后的input元素里面有些啥東東：
這里很清楚得可以看到，我們獲取到了選擇的圖片，包括有最后修改事件，圖片名稱，大小以及圖片類型(有了文件類型，我們就可以判斷當(dāng)前用戶選擇的是否是圖片不是嗎(斜眼笑)) 同樣，這是單個文件的， 如果是多個文件，就會有多個file
接著往下看，通過打印輸出我們可以看到，我們再input 標(biāo)簽的files元素上已經(jīng)拿到了我們想要的文件信息，我們只需要獲取它們就行了：
var files = this.files;
var length = files.length;
這樣，我們就可以獲取到所有文件，以及文件的個數(shù)，那這里問題來了，我們?nèi)绻沁x擇多個文件，如果將其依次輸出并展示到頁面上呢？看到上面標(biāo)注的四個字，腦袋中有沒有閃現(xiàn)出兩個字呢？循環(huán)
$.each(files, function (key, value) {
//TOTO Something
});
通過將上面得到的files 循環(huán)，我們可以依次得到每個文件的信息。這樣，你就不僅可以將其依次輸出，如果你愿意，你還可以將其送上天～
var fileReader = new FileReader();//實例化一個FileReader對象
var file_ = files[key];//獲取當(dāng)前文件
if (/^image\/\w+$/.test(file_.type)) {//將當(dāng)前文件進行正則匹配，看是否是選擇的圖片
fileReader.onload = function() {//當(dāng)讀取操作完成時調(diào)用
}
}
有必要延伸下FileReader的知識點：
FileReader主要用于將文件內(nèi)容讀入內(nèi)存，通過一系列異步接口，可以在主線程中訪問本地文件。
使用FileReader對象，web應(yīng)用程序可以異步的讀取存儲在用戶計算機上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容，可以使用File對象或者Blob對象來指定所要處理的文件或數(shù)據(jù)。
回到主題，我們已經(jīng)能夠得到文件并且得到返回，所以此時，我們只需要展示返回的結(jié)果就行了
$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");
我們將其this.result打印出來看看是個什么東東:
不言而喻，是將圖片轉(zhuǎn)換成了Base64的數(shù)據(jù)格式。最后，我們調(diào)用 readAsDataURL 讀取文件內(nèi)容，將其用data:url字符串表示出來
fileReader.readAsDataURL(value);
這樣，你就可以得到一個簡易的圖片上傳的Demo了，但是并不是最終的，因為你還需要加很多業(yè)務(wù)進去。比如：得到一張預(yù)覽圖片后，當(dāng)前標(biāo)簽會被占用，如果下次循環(huán)進來，直接使用原標(biāo)簽，肯定會將之前的圖片替換，那這肯定不是我們想要的效果，我們希望是能依次展示，而不是替換展示。所以，我們還需要做一些處理：
$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");
//使用apend再當(dāng)前元素下追加一個子節(jié)點
$("#clubInputImagePreview") .append("<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />");
//使用after 向當(dāng)前兄弟節(jié)點 追加一個同級節(jié)點
$("#clubInputImagePreview").after( "<div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg' ></div>");
然后我們追加的刪除圖片，也需要給其點擊事件，讓我們的當(dāng)前預(yù)覽區(qū)域消失：
$("#ImgRemove").click(function () {
$(this).parent().remove();
});
最后，你會發(fā)現(xiàn)結(jié)果還不是我們想要的，那是因為 當(dāng)前ID還在，所以無法進行下一步操作，而我們只需要將當(dāng)前元素的Id Remove掉，然后新增一個同ID的元素，這樣瀏覽器就會認(rèn)為這是一個新的元素：
$input.removeAttr("id");
var newInput ='<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">';
$(this).append($(newInput));
最后完整JS代碼如下：
var intP = 0;
$("#btnClubImg").click(function() {
var $input = $("#ClubImagesUpload");
// console.log($input);
$input.on("change",
function () {
// console.log(this);
var files = this.files;
var length = files.length;
if (intP > 8) {
layer.msg('圖片不能再多了～', {});
return;
}
$.each(files,
function (key, value) {
var fileReader = new FileReader();
var file_ = files[key];
if (/^image\/\w+$/.test(file_.type)) {
fileReader.onload = function() {
if (intP > 8) {
layer.msg('圖片不能再多了～', {});
return;
}
if (key == 0 && intP == 0) {
console.log(this.result);
$("#clubInputImagePreview").css("background-image", "url(" + this.result + ")");
$("#clubInputImagePreview")
.append(
"<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove' />");
$("#clubInputImagePreview").after(
"<div id='clubInputImagePreview1' class='col-sm-9 img-preview img-preview-sm delImg'></div>");
} else {
$("#clubInputImagePreview" + parseInt(intP) + "").css("background-image",
"url(" + this.result + ")");
$("#clubInputImagePreview" + parseInt(intP) + "").append(
"<img src='/Images/registerNewSite/btn_r_del.png' class='clubsImage' id='ImgRemove" +
parseInt(parseInt(1) + parseInt(intP)) +"' />");
$("#clubInputImagePreview" + parseInt(intP) + "").after(
"<div id='clubInputImagePreview" +
parseInt(parseInt(1) + parseInt(intP)) +
"'class='col-sm-9 img-preview img-preview-sm delImg' ></div>");
}
if (key == 0 && intP == 0) {
$("#ImgRemove").click(function () {
$(this).parent().remove();
});
} else {
$("#ImgRemove" + parseInt(parseInt(1) + parseInt(intP)) + "").click(function () {
$(this).parent().remove();
});
}
intP += parseInt(1);
};
fileReader.readAsDataURL(value);
} else {
layer.msg("格式錯誤<br/>請選擇一個圖片文件");
}
});
});
$input.removeAttr("id");
var newInput =
'<input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload" class="hide" multiple="multiple">';
$(this).append($(newInput));
});
總結(jié)
以上所述是小編給大家介紹的Html5實現(xiàn)單張、多張圖片上傳功能，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
