FileReader与URL.createObjectURL实现图片、视频上传预览

之前做图片、视频上传预览常用的方案是先把文件上传到服务器,等服务器返回文件的地址后,再把该地址字符串赋给img或video的src属性,这才实现所谓的文件预览。实际上这只是文件“上传后再预览”,这既浪费了用户的时间,也浪费了不可轻视的流量。

最近上网查资料才知道其实可以很轻松地实现“上传前预览”。实现方法有两种:FileReader和URL.createObjectURL。

关于FileReader的讲解可以看这里

关于URL.createObjectURL方法的讲解和应用可以看这里

 IE10+

直接上代码:




    
    preview
    
    


    

方案1-FileReader

方案2-createObjectURL

一个视频编码成dataUrl放到内存浏览器肯定崩溃,用createObjectURL生成的url应该是指向硬盘中的视频而不用加载到内存

你可能感兴趣的:(前端面试题,音视频,FileReader,createObjectURL,上传预览)