JS輕鬆實現圖片上傳即時預覽，本地預覽

時間 2019-12-15

原文原文鏈接

如今，在實現前端圖片即時預覽，能夠說是一件很簡單的事情了。javascript

咱們只須要用file對象和FileReader對象，既能夠輕鬆實現，無需下載類庫。html

HTML代碼前端

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
    <input type="file" name="image" />
</form>
</body>
</html>

先來講說input，input這個元素，具備一個files屬性，該屬性是一個filelist對象，是file對象的集合。java

你能夠經過input.files[0]的語法形式拿到這個file對象，不過遺憾的是，這個對象僅僅包含了用戶選擇的文件的相關信息，如文件名，大小，類型，最後修改時間等，並不直接提供文件的數據。程序員

程序員只能經過這些信息對用戶選擇的文件進行一些限制。ide

因此，咱們要使用另外一個對象FileReader來讀取到用戶選擇的文件的數據this

咱們初始化一個FileReader對象spa

var x=new FileReader;

這是一個初始化完成的FileReader對象具備的一些屬性和支持的事件code

相似於Ajax，FileReader提供了readyState來查看讀取的狀態，不過並無什麼卵用orm

由於FileReader還提供了onloadend這樣的事件，來處理數據讀取完成後該幹些什麼，onprogress是最有趣的，只要在讀取數據，那麼這個事件會被不停的觸發，能夠實現那種進度條效果。

還有一個極其重要的屬性result，初始化完成時，該值是null，當讀取數據後，該值就是所得到的數據。

接下來，咱們就可使用這個對象讀取用戶選擇的圖片了，沒有錯就是這麼簡單

當用戶選擇了某一個文件時，就會在input上觸發change事件，這意味着咱們能夠開始讀取數據了

    document.forms[0].elements[0].onchange=function(){ x.readAsDataURL(this.files[0]); }

readASDateURL這個方法，能夠讀取一個file對象，並把數據以base64的格式填充到FileReader對象中的result屬性中去。

當數據讀取完畢，就會觸發onloadend事件，在這個事件中，就能夠把數據填到img標籤中去

    x.onloadend=function(){ document.images[0].src=this.result; }

完整版代碼

<!DOCTYPE html>
<html>
<body>
<img src="">
<form>
    <input type="file" name="image" />
</form>
<script type="text/javascript">
    var x=new FileReader; document.forms[0].elements[0].onchange=function(){ x.readAsDataURL(this.files[0]); } x.onloadend=function(){ document.images[0].src=this.result; } </script>
</body>
</html>

固然，這裏只是一個小小的Demo，僅僅實現了本地預覽，拋磚引玉，你還能夠在此基礎上輕鬆實現對上傳文件的一些判斷和限制，或者是UI上的提高。

FileReader的能力並不止步於此，不單單有readASDataURL這種方法。

不只是圖片，音樂，視頻均可以實現對於的本地預覽，只要把result屬性的值，賦值給對應的audio或video標籤的src屬性便可，不過由於內存限制，讀取視頻每每失敗。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。