通过一个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加载本地图片进行图片预览