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 相关文章推荐
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
Apr 07 Javascript
JavaScript 反科里化 this [译]
Sep 20 Javascript
js关闭模态窗口刷新父页面或跳转页面
Dec 13 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js 动态修改css文件的方法
Aug 05 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
js中scrollTop()方法和scroll()方法用法示例
Oct 03 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
Mar 25 Javascript
使用canvas进行图像编辑的实例
Aug 29 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
vuejs移动端实现div拖拽移动
Jul 25 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 对输入信息的进行安全过滤的函数代码
2012/06/29 PHP
windows中为php安装mongodb与memcache
2015/01/06 PHP
WordPres对前端页面调试时的两个PHP函数使用小技巧
2015/12/22 PHP
Yii输入正确验证码却验证失败的解决方法
2017/06/06 PHP
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
jQuery代码优化 遍历篇
2011/11/01 Javascript
扩展JavaScript功能的正确方法(译文)
2012/04/12 Javascript
JavaScript版TAB选项卡效果实例
2013/08/16 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
2种简单的js倒计时方式
2017/10/20 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
2018/09/05 Javascript
layui问题之自动滚动二级iframe页面到指定位置的方法
2019/09/18 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
windows 10下安装搭建django1.10.3和Apache2.4的方法
2017/04/05 Python
使用Python写一个贪吃蛇游戏实例代码
2017/08/21 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python 用turtle实现用正方形画圆的例子
2019/11/21 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
基于python计算并显示日间、星期客流高峰
2020/05/07 Python
Pymysql实现往表中插入数据过程解析
2020/06/02 Python
python3让print输出不换行的方法
2020/08/24 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
Python实现石头剪刀布游戏
2021/01/20 Python
一款纯css3制作的2015年元旦雪人动画特效教程
2014/12/29 HTML / CSS
美国眼镜网站:EyeBuyDirect
2017/04/13 全球购物
潘多拉珠宝美国官方网站:Pandora US
2020/06/18 全球购物
优秀毕业大学生推荐信
2013/11/13 职场文书
我的祖国演讲稿
2014/05/04 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
学生党支部工作总结2015
2015/05/26 职场文书
防震减灾主题班会
2015/08/14 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书
Django使用echarts进行可视化展示的实践
2021/06/10 Python