出于安全的考虑,现在的浏览器都不允许...src = file:///...这样的写法,作为替代,IE可以使用“DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式,而Firefox则提供了一个getAsDataURL方法。
<html>
02 <head>
03 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
04 <title>preview</title>
05 <style>
06 #preview {
07 width: 270px;
08 height: 129px;
09 }
10 </style>
11 <!--[if IE]>
12 <style>
13 #preview {
14 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
15 }
16 </style>
17 <![endif]-->
18 </head>
19
20 <body>
21 <input id="file" type="file" />
22 <div id="preview">
23 <img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
24 </div>
25 <script>
26 document.getElementById("file").onchange = function() {
27 if ("Microsoft Internet Explorer" == navigator.appName) {
28 var preview = document.getElementById("preview");
29 preview.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = this.value;
30 document.getElementById("image").style.display = "none";
31 } else if ("Netscape" == navigator.appName){
32 document.getElementById("image").src = this.files[0].getAsDataURL();
33 } else {
34 alert("Not Support!");
35 }
36 }
37 </script>
38 </body>
39 </html>
分享到:
相关推荐
在本文中,我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能,并且检查图片的大小,确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用,因为它允许...
对于本地图片预览,JavaScript主要负责处理文件输入、DOM操作以及图像显示。 1. **文件输入**:在HTML5中,`<input type="file">`元素提供了一个选择本地文件的接口。通过添加`accept`属性,我们可以限制用户只能...
在选择本地图片文件并确定后,生成预览。同时,会对选择的图片格式进行过滤,如果不是图片格式的文件,会显示提示信息。
以下是一个具体的代码示例,展示了如何使用jQuery和AJAX实现本地图片预览: ```javascript // 引入jQuery库 <script src="path/to/jquery.min.js"></script> // 定义上传图片的函数 <script type="text/javascript...
- 压缩处理:在预览阶段,可以使用JavaScript库(如sharp、imageMagick等)对图片进行压缩,降低文件大小,减轻服务器负担。 - 图片格式转换:根据需求,可能需要将上传的图片转换为特定格式,如WebP,以节省存储...
### IE8下上传图片无法预览本地图片解决方法技术资料 #### 背景与问题描述 在Web开发过程中,特别是在处理旧版本浏览器兼容性问题时,经常会遇到各种各样的挑战。Internet Explorer 8(IE8)作为一款较早的浏览器...
- **CSS背景**:SVG也可以作为CSS背景图片使用,通过`background-image`属性和`url()`函数指定SVG文件路径。 5. 相关问题和优化: - **浏览器兼容性**:尽管大部分现代浏览器支持SVG,但老版本的IE可能需要使用特定...
本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能,结合jQuery库来增强前端交互。 首先,我们要理解JSP(JavaServer Pages)是Java的一种动态网页技术,它允许在服务器端嵌入Java代码,使得网页具有更强...
在本文中,我们将深入探讨如何使用jQuery实现本地图片上传预览功能,这是一项常见的Web开发需求,尤其是在构建交互式用户界面时。jQuery是一款强大的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互...
`images`目录则包含可能用到的额外图片资源,例如示例中使用的网络图片的本地备份,以防网络不稳定导致图片加载失败。 总结来说,这个例子展示了如何使用JavaScript(特别是jQuery库)结合HTML和CSS实现图片预览...
标题中的“整理 IE 7、8 预览本地图片和获取本地图片大小”涉及到的是在Internet Explorer 7和8这两个较旧版本的浏览器中,如何处理本地图片的预览和获取图片尺寸的问题。在早期的Web开发中,由于浏览器兼容性问题,...
`FileReader`对象提供了`readAsDataURL`方法,将文件转换为Base64编码的字符串,该字符串可以直接在`<img>`标签的`src`属性中使用,实现图片预览: ```javascript var reader = new FileReader(); reader....
在IT领域,尤其是在Web开发中,用户界面的交互性至关重要,而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片,提高了上传过程的可控性和便捷性...
在JavaScript中,本地图片的预览和上传到服务器是一个常见的需求,特别是在Web应用中,比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能,提供了源码和工具来帮助开发者轻松实现这一过程。...
- 图片预览:读取图片文件并显示预览。 - 文件上传:处理用户上传的文件,如视频、音频、文档等。 - 数据导入导出:在Web应用中导入或导出用户的数据,如CSV、JSON格式。 - 编辑本地文件:例如文本编辑器或者...
在JavaScript中实现图片上传预览是一项常见的前端功能,它允许用户在正式上传图片到服务器之前先看到图片的效果,提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片(如尺寸调整)以及在...
这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目,是基于Vue 2.5.2版本实现的,它专注于为PC端用户提供图片预览和下载功能,但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...
// 使用这个objectUrl进行图片预览 } } ``` 3. **预览图片**:有了预览URL,我们可以创建一个新的`<img>`元素或者更新现有的`<img>`元素的`src`属性。 ```javascript const previewImage = document....
标题中的“本地图片上传即时预览”是一个常见的前端开发功能,尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果,无需等待图片实际上传到服务器。...
如果想要预览图片文件,可以使用`FileReader`API读取文件内容,然后将其显示在`<img>`标签中: ```javascript function previewImage(file) { const reader = new FileReader(); reader.onload = function(e) { ...