最近在做文件上傳的需求，用到了一些IPA酒觅，研究了一下，感覺還挺有用的微峰，主要解決了：圖片上傳到服務(wù)器后就可以立即展示在前端的頁面舷丹，而不需要等上傳成功之后，再拿回傳的URL去請(qǐng)求蜓肆。因?yàn)閳D片小的話還好說颜凯，如果圖片很大的話谋币，那就要等很長(zhǎng)時(shí)間了!
一、URL.createObjectURL
URL.createObjectURL()方法會(huì)根據(jù)傳入的參數(shù)創(chuàng)建一個(gè)指向該參數(shù)對(duì)象的URL症概。
這個(gè)URL的生命僅存在于它被創(chuàng)建的這個(gè)文檔里蕾额，新的對(duì)象URL指向執(zhí)行的File對(duì)象或者是Blob對(duì)象。
語法:
objectURL = window.URL.createObjectURL(blob || file);
File對(duì)象彼城，就是一個(gè)文件凡简，比如我用input type="file"標(biāo)簽來上傳文件，那么里面的每個(gè)文件都是一個(gè)File對(duì)象精肃。
Blob對(duì)象，就是二進(jìn)制數(shù)據(jù)帜乞，比如通過new Blob()創(chuàng)建的對(duì)象就是Blob對(duì)象司抱。
又比如，在XMLHttpRequest里黎烈，如果指定responseType為blob习柠，那么得到的返回值也是一個(gè)blob對(duì)象。
二照棋、URL.revokeObjectURL
每次調(diào)用createObjectURL時(shí)资溃，即使你已經(jīng)為同一個(gè)文件創(chuàng)建過一個(gè)URL，也會(huì)創(chuàng)建一個(gè)新的URL對(duì)象烈炭。
如果你不再需要這個(gè)對(duì)象溶锭，需要使用URL.revokeObjectURL()方法釋放它。
雖然當(dāng)頁面被關(guān)閉符隙，瀏覽器會(huì)自動(dòng)釋放它趴捅，但是為了最佳性能和內(nèi)存使用，當(dāng)確保不再用得到它時(shí)霹疫，就應(yīng)該釋放它拱绑。
語法:
window.URL.revokeObjectURL(objectURL);
三、實(shí)例：預(yù)覽選擇的圖片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>預(yù)覽選擇的圖片</title>
</head>
<body>
<input type="file" multiple onchange="showSelectedImages(this.files)" id="uploadInput">
<div id="fileList"></div>
</body>
<script>
window.URL = window.URL || window.webkitURL;
/**
* 顯示選擇的文件預(yù)覽
* @param {[type]} files 選擇的文件
*/
function showSelectedImages(files) {
var fileList = document.getElementById('fileList');
var list = document.createElement("ul");
fileList.appendChild(list);
for (var i = 0; i < files.length; i++) {
if (isImageByType(files[i].type)) {
var li = document.createElement("li");
list.appendChild(li);
var img = document.createElement("img");
img.src = window.URL.createObjectURL(files[i]);
img.width = 200;
img.onload = function() {
window.URL.revokeObjectURL(this.src);
}
li.appendChild(img);
var info = document.createElement("span");
info.innerHTML = files[i].name + "丽蝎，" + parseBytes(files[i].size);
li.appendChild(info);
}
}
}
/**
* 解析文件字節(jié)數(shù)
* @param {[type]} bytes 總字節(jié)數(shù)
* @param {[type]} decimal 小數(shù)點(diǎn)后位數(shù)
* @return {[type]} 解析后的文件大小
*/
function parseBytes(bytes, decimal) {
var fileSize = 0,
units = ["KB", "MB", "GB", "TB"];
decimal = decimal || 3;
for (var i = 0, size = bytes / 1024; size > 1; size /= 1024, i++) {
fileSize = size.toFixed(decimal) + units[i];
}
return fileSize;
}
/**
* 判斷文件是否是圖片
* @param {[type]} fileType 文件
* @return {Boolean}
*/
function isImageByType(fileType) {
return fileType.indexOf("image") < 0 ? false : true;
}
</script>
</html>
