小程序开发选哪家好_createObjectURL方法完成本地图

2021-01-08 09:42

createObjectURL方法实现本地图片预览       这篇文章主要为大家详细介绍了createObjectURL方法实现本地图片预览，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

ie6 可以直接显示本本地路径的图片 如： img src="file://c:/3.jpg" /   ~~~网上都说ie7就不支持这种文件系统路径的url，但测试 xp ie8还是可以的

ie8+ alphaImageLoader滤镜方式加载本地路径的图片

chrome, firefox, 用dataUrl  或 createObjectURL方法实现

例子：

 !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "TR/xhtml1/DTD/xhtml1-transitional.dtd" 
 html xmlns="1999/xhtml" 
 head 
 meta http-equiv="Content-Type" content="text/html; charset=gb2312" / 
 title get file input full path /title 
 script type="text/javascript" language='javascript' 
 function getFullPath(obj) {
 var newPreview = document.getElementById("img");
 if (obj) {
 //ie
 if (window.navigator.userAgent.indexOf("MSIE") = 1) {
 obj.select();
 newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale);";
 newPreview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = document.selection.createRange().text;
 return;
 //firefox
 else if (window.navigator.userAgent.indexOf("Firefox") = 1) {
 if (obj.files) {
 newPreview.src = window.URL.createObjectURL(obj.files.item(0));
 return;
 newPreview.src = obj.value;
 return;
 newPreview.src = obj.value;
 return;
 /script 
 /head 
 body 
 input type="file" onchange="getFullPath(this);" / 
 img id="img" alt="" src="你自己的透明图片"/ 
 /body 
 /html 

然后 我们来看看 window.URL.createObjectURL() 到底是什么

window.URL.createObjectURL

概述

创建一个新的对象URL,该对象URL可以代表某一个指定的File对象或Blob对象.

语法

objectURL = window.URL.createObjectURL(blob);

blob参数是一个File对象或者Blob对象. objectURL是生成的对象URL.通过这个URL,可以获取到所指定文件的完整内容.

示例

查看.

附注

在每次调用createObjectURL()方 法的时候,都会创建一个新的对象URL,即使参数中的这个对象已经有了自己的对象URL.在你不需要这些对象URL的时候,你应该通过调用 方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.

浏览器兼容性

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。