createObjectURL方法实现本地图片预览
时间:2019-09-30
本文章向大家介绍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" "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()方法来释放它们所占用的内容.虽然即使你不主动释放它们,浏览 器也会在当前文档被卸载的时候替你释放,不过,考虑到更好的性能和更少的内存占用,你应该在安全的时候主动施放它们.
浏览器兼容性
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- 10x Python开发者必读:本月Python文章TOP 10
- Linux下更换默认yum源为网易yum源的操作记录
- yum源使用的几个报错小总结
- JQuery笔记(一)
- Haproxy和Nginx负载均衡测试效果对比记录
- JQuery笔记(三) jquery的用途
- Heartbeat使用梳理
- JQuery笔记(二) animate支持的属性
- 腾讯叮当首次系统性展示AI能力 开放日展示实战型解决方案
- Execute 方法(Find 对象)
- 在容器中部署mysql与数据持久化
- silverlight如何在运行时用代码动态控制(或创建)动画
- 小程序深夜连发4大功能!你们要的直播来了!
- 机器学习在现实生活中到底有哪些应用?
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- RXjava网络获取图片数据的方法
- VerticalBannerView仿淘宝头条实现垂直轮播广告
- ViewFlipper实现文字轮播效果
- Android自定义ViewFlipper实现滚动效果
- ViewFlipper实现上下翻滚轮播效果
- android实现长图加载效果
- 使用Thumbnails实现图片指定大小压缩
- Flutter中如何加载并预览本地的html文件的方法
- Android在自定义类中实现自定义监听器方式
- 解决WebView通过URL加载H5界面出现空白的问题
- kotlin 定义接口并实现回调的例子
- STL 总结与常见面试题
- kotlin中EditText赋值Type mismatch方式
- Kotlin 创建接口或者抽象类的匿名对象实例
- kotlin Context使用详解