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