之前做圖片、視頻上傳預覽常用的方案是先把文件上傳到服務器，等服務器返回文件的地址后，再把該地址字符串賦給img或video的src屬性，這才實現所謂的文件預覽。實際上這只是文件“上傳后再預覽”，這既浪費了用戶的時間，也浪費了不可輕視的流量。
最近上網查資料才知道其實可以很輕松地實現“上傳前預覽”。實現方法有兩種：FileReader和URL.createObjectURL。
關於FileReader的講解可以看這里
關於URL.createObjectURL方法的講解和應用可以看這里
直接上代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>preview</title> <style> * { box-sizing: border-box; } .section { margin: 20px auto; width: 500px; border: 1px solid #666; text-align: center; } .preview { width: 100%; margin-top: 10px; padding: 10px; min-height: 100px; background-color: #999; } .preview img, .preview video { width: 100%; } </style> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js" type="text/javascript"></script> </head> <body> <div class="section"> <p>方案1</p> <input class="upload" type="file" onchange=onUpload1(this.files[0])> <div class="preview preview1"></div> </div> <div class="section"> <p>方案2</p> <input class="upload" type="file" onchange=onUpload2(this.files[0])> <div class="preview preview2"></div> </div> <script> function onUpload1 (file) { var fr = new FileReader(); fr.readAsDataURL(file); // 將文件讀取為Data URL fr.onload = function(e) { var result = e.target.result; if (/image/g.test(file.type)) { var img = $('<img src="' + result + '">'); $('.preview1').html('').append(img); } else if (/video/g.test(file.type)) { var vidoe = $('<video controls src="' + result + '">'); $('.preview1').html('').append(vidoe); } } } function onUpload2 (file) { var blob = new Blob([file]), // 文件轉化成二進制文件 url = URL.createObjectURL(blob); //轉化成url if (/image/g.test(file.type)) { var img = $('<img src="' + url + '">'); img[0].onload = function(e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL創建的對象 } $('.preview2').html('').append(img); } else if (/video/g.test(file.type)) { var video = $('<video controls src="' + url + '">'); $('.preview2').html('').append(video); video[0].onload = function(e) { URL.revokeObjectURL(this.src); // 釋放createObjectURL創建的對象 } } } </script> </body> </html>復制代碼demo截圖：
方案1、2 上傳圖片
方案1 上傳視頻
方案2 上傳視頻