`
luolonghao
  • 浏览: 120038 次
  • 性别: Icon_minigender_1
  • 来自: Shanghai
社区版块
存档分类
最新评论

预览本地图片

 
阅读更多

IE6:
//img: image object
//file: file inputbox object
img.src = file.value;


IE7-8:
var src = '';
file.select();
try {
    src = document.selection.createRange().text;
} finally {
    document.selection.empty();
}
src = src.replace(/[)'"%]/g, function(s){ return escape(escape(s)); });
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src=\"" + src + "\")";


Firefox 6以下:
img.src = file.files[0].getAsDataURL();


Firefox 3.6 (1.9.2)+,Chrome 7+,IE10+,Opera 11.1+,Safari Nightly build:
var oFile = file.files[0];
var oFReader = new FileReader();
oFReader.onload = function (oFREvent) {
	img.src = oFREvent.target.result;
};
oFReader.readAsDataURL(oFile);


IE9:不能用IE8的方法,也不支持FileReader, http://html5labs.interoperabilitybridges.com/prototypes/fileapi/fileapi/info 里的FileAPI也不能用,需要进一步调查。

参考文档:
https://developer.mozilla.org/en/DOM/FileReader


2
0
分享到:
评论

相关推荐

    ie8下上传图片无法预览本地图片解决方法技术资料

    ### IE8下上传图片无法预览本地图片解决方法技术资料 #### 背景与问题描述 在Web开发过程中,特别是在处理旧版本浏览器兼容性问题时,经常会遇到各种各样的挑战。Internet Explorer 8(IE8)作为一款较早的浏览器...

    整理 IE 7、8预览本地图片和获取本地图片大小

    标题中的“整理 IE 7、8 预览本地图片和获取本地图片大小”涉及到的是在Internet Explorer 7和8这两个较旧版本的浏览器中,如何处理本地图片的预览和获取图片尺寸的问题。在早期的Web开发中,由于浏览器兼容性问题,...

    getAsDataURL在Firefox7.0下无法预览本地图片的解决方法

    然而,在Firefox 7.0版本中,开发者遇到了一个棘手的问题:`getAsDataURL()`无法正确预览本地图片。本文将深入探讨这个问题的原因,并提供解决方案。 首先,`getAsDataURL()`是`FileReader`接口的一个方法,它允许...

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐

    jquery file上传预览本地图片支持IE6\7\8\9\10 chrome 火狐 网上有很多关于 file上传预览本地图片开源角本但都对支持到IE6\7\8,而且chrome 火狐最新版本也有问题,自己动手丰衣足食。分享给给大家。

    这个工具可以帮助用户预览本地图片,并生成 Markdown 格式的图片链接,用户可以一键复制链接

    这个工具可以帮助用户预览本地图片,并生成 Markdown 格式的图片链接,用户可以一键复制链接

    本地图片预览 html+js

    本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览

    客户端file控件预览本地图片

    保你好用! 网上有很多file预览本地的图片,可在客户端不行。自己用滤镜写了一个预览本地的图片,服务端客户端都可以,兼容主流浏览器。如果好用,请赞!赞!

    本地预览图片

    对于本地图片预览,JavaScript主要负责处理文件输入、DOM操作以及图像显示。 1. **文件输入**:在HTML5中,`<input type="file">`元素提供了一个选择本地文件的接口。通过添加`accept`属性,我们可以限制用户只能...

    vue组件js图片查看点击预览大图并下载高清大图到本地

    这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目,是基于Vue 2.5.2版本实现的,它专注于为PC端用户提供图片预览和下载功能,但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...

    js 手机端 图片放大预览

    在移动设备上,图片放大预览是用户交互中常见的功能,尤其在查看产品细节或浏览照片时。JavaScript(简称JS)作为网页动态效果的主要驱动力,提供了多种方法来实现手机端图片的放大预览功能。以下是一些核心知识点,...

    Jsp中显示本地图片预览

    在JSP(JavaServer Pages)中,显示本地图片预览是一项常见的需求,特别是在网页开发中。JSP是一种基于Java的动态网页技术,它允许开发者在HTML、XML或其他标记语言中嵌入Java代码,以实现服务器端的数据处理和动态...

    tinyMCE本地图片预览

    ### tinyMCE本地图片预览实现详解 #### 一、简介 tinyMCE是一款非常流行的开源富文本编辑器,广泛应用于各种网站和应用程序中。它提供了丰富的文本编辑功能,包括但不限于格式化文本、插入图像、链接等。在某些...

    图片上传本地预览插件

    在IT领域,图片上传本地预览插件是一个常见的功能组件,尤其在网页应用和桌面软件中,它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前,能够在本地环境中预览图片效果,确保图片的...

    在页面预览客户端本地图片的js代码(兼容FF IE)

    在网页开发中,经常会遇到需要在页面上预览本地图片的需求,但是出于安全原因,主流浏览器如IE(Internet Explorer)并不允许直接通过img元素的src属性引用本地文件系统中的图片路径。这是因为直接通过网页代码访问...

    cocos creator 网页获取电脑本地图片并显示

    2. **预览本地图片** 使用FileReader API,我们可以读取用户选择的图片文件。`FileReader`对象提供了`readAsDataURL()`方法,读取完成后会触发`onload`事件,返回一个data URL,该URL可以直接用作`img`元素的`src`...

    本地预览Svg图片.zip

    在本地环境中预览SVG图片涉及到多个技术点,下面将详细介绍SVG的基本概念、本地预览的方法以及相关的开发工具和技巧。 1. SVG基本概念: SVG是一种可伸缩图形格式,允许开发者用数学方式描述图像,包括线条、形状、...

    jquery 本地上传图片预览Demo

    在本文中,我们将深入探讨如何使用jQuery实现本地图片上传预览功能,这是一项常见的Web开发需求,尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...

    jsp 本地图片上传前的预览

    本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能,结合jQuery库来增强前端交互。 首先,我们要理解JSP(JavaServer Pages)是Java的一种动态网页技术,它允许在服务器端嵌入Java代码,使得网页具有更强...

    jQuery点击头像上传本地预览裁剪图片

    在IT领域,尤其是在Web开发中,用户界面的交互性至关重要,而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性...

    本地图片上传即时预览

    标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...

Global site tag (gtag.js) - Google Analytics