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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
js中的json对象详细介绍
Oct 29 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
解析利用javascript如何判断一个数为素数
Dec 08 Javascript
JavaScript中this的用法实例分析
Dec 19 Javascript
jQuery中layer分页器的使用
Mar 13 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
Sep 14 Javascript
一百行JS代码实现一个校验工具
Apr 30 Javascript
微信小程序实现吸顶效果
Jan 08 Javascript
jQuery实现简单飞机大战
Jul 05 jQuery
微信小程序实现分享商品海报功能
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
mysql limit查询优化分析
2008/11/12 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
2012/07/17 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
JavaScript实现倒计时跳转页面功能【实用】
2016/12/13 Javascript
微信页面倒计时代码(解决safari不兼容date的问题)
2016/12/13 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JavaScript Canvas绘制圆形时钟效果
2020/08/20 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
javascript关于“时间”的一次探索
2019/07/24 Javascript
在layui tab控件中载入外部html页面的方法
2019/09/04 Javascript
layui点击弹框页面 表单请求的方法
2019/09/21 Javascript
Vue 2.0双向绑定原理的实现方法
2019/10/23 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue-simple-uploader上传成功之后的response获取代码
2020/09/07 Javascript
用Python编写一个基于终端的实现翻译的脚本
2015/04/24 Python
python中requests使用代理proxies方法介绍
2017/10/25 Python
Python抽象和自定义类定义与用法示例
2018/08/23 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
python实现银行账户系统
2021/02/22 Python
html5设计原理(推荐收藏)
2014/05/17 HTML / CSS
HTML5+lufylegend实现游戏中的卷轴
2016/02/29 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
公务员培训自我鉴定
2013/09/19 职场文书
师范毕业生求职自荐信
2013/09/25 职场文书
证婚人搞笑证婚词
2014/01/10 职场文书
关于旷工的检讨书
2014/02/02 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
房地产广告词大全
2014/03/19 职场文书
历史博物馆观后感
2015/06/05 职场文书
在Windows Server 2012上安装 .NET Framework 3.5 所遇到的问题
2022/04/29 Servers