很久很久以前，那时候还是IE的天下，使用Javascript预览本地图片实现起来非常简单，就是设置一下：
document.getElementById("image").src = "file:///" + document.getElementById("input").value;
不过出于安全的考虑，现在的浏览器都不允许...src = file:///...这样的写法，作为替代，IE可以使用“DXImageTransform.Microsoft.AlphaImageLoader”滤镜的方式，而Firefox则提供了一个getAsDataURL方法。
01 <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格式。 - 编辑本地文件：例如文本编辑器或者...
这个名为"vue组件js图片查看点击预览大图并下载高清大图到本地"的项目，是基于Vue 2.5.2版本实现的，它专注于为PC端用户提供图片预览和下载功能，但不支持IE浏览器。下面我们将详细探讨实现这些功能的关键知识点。 ...
// 使用这个objectUrl进行图片预览 } } ``` 3. **预览图片**：有了预览URL，我们可以创建一个新的`<img>`元素或者更新现有的`<img>`元素的`src`属性。 ```javascript const previewImage = document....
在JavaScript中实现图片上传预览是一项常见的前端功能，它允许用户在正式上传图片到服务器之前先看到图片的效果，提供了一种良好的用户体验。这个过程通常包括选择图片、读取图片数据、处理图片（如尺寸调整）以及在...
标题中的“本地图片上传即时预览”是一个常见的前端开发功能，尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果，无需等待图片实际上传到服务器。...
如果想要预览图片文件，可以使用`FileReader`API读取文件内容，然后将其显示在`<img>`标签中： ```javascript function previewImage(file) { const reader = new FileReader(); reader.onload = function(e) { ...