input="file" 實現(xiàn)圖片預(yù)覽，簡單好記

廢話不多說，直接貼代碼：

來源于本地

js如下：

來源于本地

通過URL.createObjectURL()可以獲取當(dāng)前文件的一個內(nèi)存URL，存儲在內(nèi)存中，直到document觸發(fā)了unload事件（例如：document close）或者執(zhí)行revokeObjectURL來釋放

而?FileReader.readAsDataURL則返回包含很多字符的base64，并相對會消耗更多內(nèi)存，但是在不用的時候會自動從內(nèi)存中清除（通過垃圾回收機(jī)制）

優(yōu)劣對比：

使用URL.createObjectURL可以節(jié)省性能并更快速，只不過需要在不使用的情況下手動釋放內(nèi)存

如果不太在意設(shè)備性能問題，并想獲取圖片的base64，則推薦使用FileReader.readAsDataURL

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ??隨著 HTML5 的出現(xiàn)，面向未來 Web 應(yīng)用的 JavaScript API 也得到了極大的發(fā)展。這些 A...
    霜天曉閱讀 1,173評論 0贊 0
  • 1、原理淺析 FileReader，利用FileReader實例的readAsDataURL方法可以將input上...
    風(fēng)之化身呀閱讀 1,813評論 0贊 0
  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,674評論 1贊 32
  • 我叫王奕明，加入八年級已經(jīng)快一學(xué)期了，不喜解釋，不善辯溝通，不愛學(xué)習(xí)，偶爾給老師鬧點動靜，給家長添些麻煩，嘿...
    9045a14657a3閱讀 272評論 0贊 0
  • 省道
    bug搬運工閱讀 198評論 0贊 0

友情鏈接更多精彩內(nèi)容