淺談js fileReader和window.url.createobjecturl
// preview img：fileReader方式document.getElementById（'imgfile'）。 onChange = function（e）{5 var ele = document.getElementByid（'imgfile'）。文件[0]; var fr = new FileReader（）; fr.onload = function（ele）{var pvimg = new Image（）; pvimg.src = ele.target.Result; pvimg.setAttribute（'id'，'previewimg'）; $（'。preview_wrap'）.html（''）。附錄（pvimg）; 18} fr.ReadAsdataurl（ele）; } //預覽img：url.createobjectUrl document.getElementById（'imgfile'）。 onChange = function（e）{var ele = document.getElementById（'imgfile'）。文件[0]; var createObjectUrl = function（blob）{返回窗口[window.webkiturl？ 'webkiturl'：'url'] ['createObjectUrl']（blob）; }; var newimgdata = createObjectUrl（ele）; var pvimg = new Image（）; pvimg.src = newimgdata; pvimg.setAttribute（'id'，'previewimg'）; $（'。preview_wrap'）.html（''）。附錄（pvimg）; }以上先貼出用fileReader和url.createobjecturl兩種預覽方式。
按照前輩們的說法，CreatoBjecturl可以有更好的性能，或許是瀏覽器自帶接口的原因，可以處理的更快。 ，可以處理的更快。
最近做了一個需要上傳圖片預覽的項目，用的最簡單的輸入文件上傳，最開始想到的就是用fileReader實現前端預覽，很簡單，見前面的第一段代碼，在自己手機上測試，沒問題。但在某些奇葩手機上
看了下代碼，如下圖，是因為base64編碼內缺少了圖片格式，圖image/jpg圖片立即顯示，剛開始以為是
繼續百度（Google最近公司fq不穩定，沒法用），結果看到有人遇到類似奇怪問題，但是沒有解決。 ，但是沒有解決。
無意間卻發現圖片預覽除了fileReader還可以用url.createobjecturl。晚上11點26，先趕最後一班地鐵。
====================
第二天一早，把半夜的靈感實驗了下，根據判斷輸入文件的圖片類型，如果不存在就給文件手動賦值類型。 （見下方調試用代碼，有點亂）
結果發現文件的類型並不是你直接賦值就可以改變的，沒有用！ ，沒有用！
於是開始實踐url.createobjecturl（見最上面的第二部分代碼）
神奇！發現預覽正常！
查看代碼發現，createObjecturl得到的是一個http格式的文件，即使輸入文件的文件類型不存在也不會編碼失敗。
以上這篇淺談js圖片前端預覽之fileReader和window.url.createobjecturl就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。 ，也希望大家多多支持武林網。