createObjectURL方法实现本地图片预览


Posted in Javascript onSeptember 30, 2019

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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="" style="width:200px; height:200px;" src="你自己的透明图片"/>
</body>
</html>

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

window.URL.createObjectURL

概述

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

语法

objectURL = window.URL.createObjectURL(blob);

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

示例

查看使用对象URL显示图片.

附注

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

浏览器兼容性

createObjectURL方法实现本地图片预览

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS调用CS里的带参方法实例
Aug 01 Javascript
动态加载jQuery的方法
Jun 16 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
Jul 07 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JS实现AES加密并与PHP互通的方法分析
Apr 19 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
Aug 11 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
Nov 28 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
uniapp,微信小程序中使用 MQTT的问题
Jul 11 Javascript
JS实现炫酷雪花飘落效果
Aug 19 Javascript
微信小程序实现分享商品海报功能
Sep 30 #Javascript
Bootstrap实现模态框效果
Sep 30 #Javascript
HTML+JavaScript实现扫雷小游戏
Sep 30 #Javascript
React+Redux实现简单的待办事项列表ToDoList
Sep 29 #Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 #Javascript
在vue中根据光标的显示与消失实现下拉列表
Sep 29 #Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 #Javascript
You might like
php 在线导入mysql大数据程序
2015/06/11 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
网页常用特效代码整理
2006/06/23 Javascript
List the UTC Time on a Computer
2007/06/11 Javascript
dotopAlert 提示用户需安装播放器的代码
2012/09/17 Javascript
window.onload追加函数使用示例
2014/03/03 Javascript
jquery实现浮动的侧栏实例
2015/06/25 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
Python3多线程爬虫实例讲解代码
2018/01/05 Python
Python实现快速傅里叶变换的方法(FFT)
2018/07/21 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Python如何定义一个函数
2015/09/01 面试题
工程管理专业个人求职信范文
2013/12/07 职场文书
缴纳养老保险的证明
2014/01/10 职场文书
应届护士求职信范文
2014/01/26 职场文书
建筑总经理岗位职责
2014/02/02 职场文书
《雨点》教学反思
2014/02/12 职场文书
园艺师求职信
2014/03/10 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
2014年内部审计工作总结
2014/12/09 职场文书
python析构函数用法及注意事项
2021/06/22 Python
MySQL 数据库 增删查改、克隆、外键 等操作
2022/05/11 MySQL