圖片上傳實(shí)時(shí)展示

最近在做文件上傳的需求,用到了一些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> 
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末猎拨,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子屠阻,更是在濱河造成了極大的恐慌红省,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件栏笆,死亡現(xiàn)場(chǎng)離奇詭異类腮,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)蛉加,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蚜枢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來缸逃,“玉大人,你說我怎么就攤上這事厂抽⌒杵担” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵筷凤,是天一觀的道長(zhǎng)昭殉。 經(jīng)常有香客問我,道長(zhǎng)藐守,這世上最難降的妖魔是什么挪丢? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮卢厂,結(jié)果婚禮上乾蓬,老公的妹妹穿的比我還像新娘。我一直安慰自己慎恒,他們只是感情好任内,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著融柬,像睡著了一般死嗦。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上粒氧,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天越除,我揣著相機(jī)與錄音,去河邊找鬼外盯。 笑死廊敌,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的门怪。 我是一名探鬼主播骡澈,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼掷空!你這毒婦竟也來了肋殴?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤坦弟,失蹤者是張志新(化名)和其女友劉穎护锤,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體酿傍,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡烙懦,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了赤炒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片氯析。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡亏较,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出掩缓,到底是詐尸還是另有隱情雪情,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布你辣,位于F島的核電站巡通,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏舍哄。R本人自食惡果不足惜宴凉,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望表悬。 院中可真熱鬧跪解,春花似錦、人聲如沸签孔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽饥追。三九已至,卻和暖如春罐盔,著一層夾襖步出監(jiān)牢的瞬間但绕,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工惶看, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留捏顺,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓纬黎,卻偏偏與公主長(zhǎng)得像幅骄,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子本今,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361