之前做圖片、視頻上傳預覽常用的方案是先把文件上傳到服務器，等服務器返回文件的地址后，再把該地址字符串賦給img或video的src屬性，這才實現所謂的文件預覽。實際上這只是文件“上傳后再預覽”，這既浪費了用戶的時間，也浪費了不可輕視的流量。
最近上網查資料才知道其實可以很輕松地實現“上傳前預覽”。實現方法有兩種：FileReader和URL.createObjectURL。
關于FileReader的講解可以看這里
關于URL.createObjectURL方法的講解和應用可以看這里
?IE10+
直接上代碼：
<!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-FileReader</p><input class="upload" type="file" onchange=onUpload1(this.files[0])><div class="preview preview1"></div></div><div class="section"><p>方案2-createObjectURL</p><input class="upload" type="file" onchange=onUpload2(this.files[0])><div class="preview preview2"></div></div><script>// 方式一：FileReaderfunction onUpload1 (file) {var fr = new FileReader();fr.readAsDataURL(file); // 將文件讀取為Data URLfr.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);}}}// 方式二：createObjectURL（推薦）function onUpload2 (file) {var blob = new Blob([file]), // 文件轉化成二進制文件url = URL.createObjectURL(blob); //轉化成url// 或者直接：var url = window.URL.createObjectURL(file);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>一個視頻編碼成dataUrl放到內存瀏覽器肯定崩潰，用createObjectURL生成的url應該是指向硬盤中的視頻而不用加載到內存
![[Android]使用Git將項目提交到GitHub](http://pic.xiahunao.cn/[Android]使用Git將項目提交到GitHub)
