• 欢迎关注我的微信公众号“ frontEnd_Developer ” 右边扫描关注 --->>

JS加载本地图片进行图片预览

JavaScript 神棍 877℃ 0评论

通过一个JS 方法直接模拟图片地址加载,类似于:blob:http://xxxxx/exe-dfidfe 的这样一段URL字符串

 //创建对象的 URL资源
  function createObjectURL(blob){
        if(window.URL){
            return window.URL.createObjectURL(blob);
        }else if(window.webkitURL){
            return window.webkitURL.createObjectURL(blob);
        }
            return null;
  }

可以调用这个方面获得地址:
下面是我项目中的代码,直接拷贝上来的,方法一样

    var src = createObjectURL(file);
    var files = new FormData();
    files.append(_this.attr('name'), _this[0].files[0]);
    uploadImage.find('.col-xs-4:last').before('<div class="col-xs-4 " onclick="checkedThis(this)"> ' +
   '<div class="up-thumbnail"> ' +
      '<span class="loadding"> ' +
        '<i class="fa fa-spinner fa-spin"></i> ' +
      '</span> ' +
      '<img src="' + src + '" alt="' + file.name + '"/> ' +
     '</div> ' +
   '</div>');

输出的HTML为:

<img src="blob:http://localhost:8080/49722c69-ffa8-4e99-a5b6-ec7535a46599" />

这样就可以实现预览了

不过还有一个对应的 删除 的方法,就是说在使用完这个预览之后,需要删除掉这个URL资源,不然会占用浏览器资源的

方法如下:

   function revokeObjectURL(blob) {
      if (window.URL) {
        return window.URL.revokeObjectURL(blob);
       } else if (window.webkitURL) {
         return window.webkitURL.revokeObjectURL(blob);
       }
   }

调用:

revokeObjectURL(src)

就好了

转载请注明:Falost的小窝 » JS加载本地图片进行图片预览

如果你觉得这篇文章不错或者对你有帮助,想请我喝一杯咖啡,可以打赏
喜欢 (63)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 来看看,学习学习!!
    蒂欧娜2016-10-17 08:19 回复