之前做图片、视频上传预览常用的方案是先把文件上传到服务器，等服务器返回文件的地址后，再把该地址字符串赋给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 上传视频