功能描述
通过 JavaScript 实现图片的本地预览（无需上传至服务器），兼容所有浏览器（IE6&IE6+、Chrome、Firefox）。
效果示例
实现要点
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
实现代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#preview, .img, img
{
width:200px;
height:200px;
}
#preview
{
border:1px solid #000;
}
</style>
</head>
<body>
<div id="preview"></div>
<input type="file" onchange="preview(this)" />
<script type="text/javascript">
function preview(file)
{
var prevDiv = document.getElementById('preview');
if (file.files && file.files[0])
{
var reader = new FileReader();
reader.onload = function(evt){
prevDiv.innerHTML = '<img src="' + evt.target.result + '" />';
}
reader.readAsDataURL(file.files[0]);
}
else
{
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
</script>
</body>
</html>
原作者：微米博客
如若引用 请注明出处
分享到：
相关推荐
本技术讨论主要围绕“图片上传预览（兼容所有主流浏览器）”这一主题展开，我们将深入探讨如何利用JavaScript实现这一功能，并确保其在各种主流浏览器中运行良好。 首先，我们来理解一下“图片上传预览”的概念。当...
这个标题提到的"js预览图片 上传前预览图片 兼容ie6.7.8.9 ff 谷歌 opera 苹果浏览器"，表明这是一个旨在解决浏览器兼容性问题的解决方案，涵盖了老版本的Internet Explorer（IE6到IE9）以及Firefox、Chrome、Opera...
在JavaScript编程中，预览图片是一项常见的需求，尤其是在网页上传图片功能中。...通过这样的方式，我们可以实现一个完整的、跨浏览器的JavaScript图片预览功能，满足包括IE6、7、8在内的各种浏览器的兼容需求。
在Web开发中，实现图片的实时预览是一项常见的需求，尤其是在用户上传图片之前提供一个预览功能。传统的实现方式是直接通过文件路径来显示图片，但由于浏览器的安全性限制，Web应用无法获取本地文件系统的图片路径。...
在JavaScript中实现上传图片前的预览功能是一项常见的需求，特别是在网页表单中，用户在上传图片之前能够看到即将上传的图片效果。这个功能通过利用HTML5的File API以及对不同浏览器的兼容性处理来实现。以下是一个...
在IT领域，尤其是在Web开发中，图片上传预览功能是一个非常常见的需求，它允许用户在正式上传图片前先查看预览效果，提升了用户体验。本文将深入探讨如何实现一个兼容多种浏览器的图片上传预览功能，并基于提供的...
由于Flash的广泛安装基础，这种方法可以在大多数现代计算机上运行，从而解决了IE、Firefox、Chrome、Safari等不同浏览器间的上传兼容性问题。 以下是关于SWFUpload的一些关键知识点： 1. **初始化设置**：...
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
"上传头像图片带预览剪切JAVA版-兼容所有浏览器"是一个典型的Web应用功能，它允许用户选择并预览图片，然后进行剪切操作，最终上传作为自己的头像。这个功能在社交网络、论坛、个人资料编辑等场景中非常常见。下面将...
在网页开发中，图片预览是一项常见的功能，特别是在用户上传图片时，为了提供良好的用户体验，让用户能在上传前预览图片效果。"兼容主流浏览器的图片预览"这一主题旨在确保不论用户使用何种浏览器，都能正常预览图片...
在本主题中，我们将深入探讨如何实现"上传文件前，本地预览图片功能，支持所有主流浏览器"。 首先，我们需要了解这个功能的核心技术——HTML5的File API。File API提供了在浏览器中读取、操作和处理文件的能力，这...
本文将详细介绍如何使用jQuery实现一个兼容各大主流浏览器（如谷歌、IE、360浏览器、火狐等）的图片预览功能。 ### 1. jQuery简介 jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画...
在本场景中，"ASP.NET 多图片上传 可预览 兼容火狐 IE"是一个功能实现，它允许用户在网页上一次性上传多张图片，并在上传前或上传过程中提供预览功能，同时确保该功能在不同浏览器，如火狐（Firefox）和IE（Internet...
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
在"Jquery-JS图片上传预览"这个主题中，我们将探讨如何利用这两个库来创建一个跨浏览器的图片预览功能，包括对火狐、谷歌和IE等主流浏览器的支持。 首先，我们需要在HTML页面中添加一个`<input>`元素，类型设置为`...
在Asp.Net开发中，图片预览功能是一个常见的需求，特别是在用户上传图片后需要即时查看效果的场景。本文将深入探讨如何实现一个跨浏览器的图片预览系统，以支持包括Internet Explorer（IE）、Google Chrome、Firefox...
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...
在IT行业中，尤其是在Web开发领域，用户经常需要上传图片，而提供一个图片上传前的预览功能能够极大地提升用户体验。这个“jquery图片上传前预览 无需上传至服务器”的技术方案，就是解决这一问题的一种方法。它允许...