(JavaScript)实现上传图片实时预览和(文件)大小判断

时间:2021-04-22 17:19:58

唉,为什么我一个做大数据和后端的要为前端耗尽心力啊??!!

昨天在做一个网页时遇到了一个问题,有一处需要插入图片,我原本的想法是获取到上传文件的URL,然后动态插入img标签,设置src为图片的URL进而实现实时预览,结果遇到了浏览器安全防护的问题,获取到的文件路径被浏览器主动修改为了“C://fakePath/XXX”的形式。

经过查询,发现了问题所在,并有两种解决方法,一是关闭浏览器的安全验证(见鬼去啦!),二是通过window.URL.createObjectURL(obj)获取图片的URL。

方法一是不可能用的了,那么就试试第二种,但是也不知道出了什么问题,这个方法也没有作用。

就在我即将放弃,打算用“文件1”“文件2”的形式来代替实时预览时,一个方案拯救了我!!!

首先贴上原地址:https://blog.csdn.net/scrat_kong/article/details/79230329

这个方法是就是通过FileReader直接读取文件内容到浏览器中!相比使用URL引用图片,这个简单直接又粗暴,直接将数据读到浏览器里展示!

  (JavaScript)实现上传图片实时预览和(文件)大小判断

FileReader对象读取到的数据就存放在当前对象的result属性中,如图所示:

  (JavaScript)实现上传图片实时预览和(文件)大小判断

效果展示:

  (JavaScript)实现上传图片实时预览和(文件)大小判断

基于这个方法,我对代码进行了修改,如下所示:

  (JavaScript)实现上传图片实时预览和(文件)大小判断

这样就可以实现图片动态插入试试预览了,相比引用URL,该方法的区别有:

  1)非引用,而是直接将图片(数据)插入到了网页中;

  2)如果插入的图片过多可能会导致浏览器停止响应(可能是占用内存的原因);

其中2)我就遇到过,因此在图片插入后请务必使用FileReader.abort()方法终止文件读取。

此外,既然能够读取到文件的内容,那么是否可以直接通过字符数量判断文件大小?

我对此进行了验证,通过多张图片的字符长度和实际字节长度的对比,我发现FileReader对象读取到的文件字符长度和文件实际字节长度的比值大概是1.33。

也就是说,通过如下语句可以求出文件的大小:

  var fileSize = this.result.split(",")[1].length/(1024*1024*1.33);

通过多次验证,该方法获取到的文件容量大小误差在10KB以内。如下所示:

  (JavaScript)实现上传图片实时预览和(文件)大小判断

  (JavaScript)实现上传图片实时预览和(文件)大小判断

  (JavaScript)实现上传图片实时预览和(文件)大小判断

最终,通过这种方法,实现了上传图片的大小判断和实时预览:

  (JavaScript)实现上传图片实时预览和(文件)大小判断