<!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>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<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 {//这是兼容IE 的
$("#preview").find("img").remove();
prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
}
}
$(function(){
$(".divClass").off("change").on("change",".uploadFile",function(){
//$("#uploadId").change(function(){
preview($(this)[0]);
});
})
</script>
<body>
<div id="preview">
<img width="200px" height="200px" class="imgClass" src="" />
</div>
<div class="divClass">
<input type="file" id="uploadId" class="uploadFile" />
</div>
</body>
</html>
● 对于 Chrome、Firefox、IE10 使用 FileReader 来实现。
● 对于 IE6~9 使用滤镜 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader 来实现。
来源：http://wangyong31893189.iteye.com/blog/1695472
注：在上传其他的上传过程中（不是本案例），得到上传的路径时，比如原本路径是：c:\administrator\user\aa.png 变成了C:\fakepath\aa.png。并且图片无法预览。这是由于浏览器的安全问题，如IE
选中启用即可。
相关推荐
在前端开发中，"input file上传图片预览"是一个常见的需求，它允许用户选择本地的图像文件，并在上传前提供预览。这个功能在许多网站和应用中都很实用，例如社交媒体平台、在线编辑器或者个人资料设置等。下面将详细...
### jQuery实现上传图片预览 在现代Web开发中，用户交互体验是提升网站吸引力的关键因素之一。其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以...
本主题聚焦于"C#上传图片预览"，这是一个常见的功能需求，无论是在网页上还是桌面应用中，用户通常希望在实际上传图片前能预览图片效果。这一功能不仅提升了用户体验，也减少了因误传错误图片而造成的困扰。 在C#中...
在HTML中实现图片上传并提供预览和裁剪功能，是一项常见的需求，尤其适用于需要...总的来说，HTML上传图片预览和裁剪涉及到HTML、CSS、JavaScript以及HTML5的File API和Canvas技术，理解这些知识点是实现该功能的关键。
"JS上传图片预览技术" 在Web开发中，上传图片预览功能是非常常见的需求。通过HTML、CSS和JavaScript可以实现图片上传预览的功能。本文将对JS上传图片预览技术进行详细的介绍 и分析。 1. 文件上传输入限制 首先，...
在IT行业中，上传图片预览是一项常见的功能，尤其在网页应用和移动应用中，它能够为用户提供即时的反馈，提高用户体验。本示例程序聚焦于实现这一功能，旨在帮助开发者理解如何在自己的项目中实现类似的功能。以下是...
在ASP.NET开发中，上传图片并提供预览功能是一项常见的需求。这有助于用户在正式提交前确认上传的图片效果，从而提升用户体验。本篇文章将详细探讨三种不同的实现方式，每种方式都有其独特的应用场景和效果。 ### ...
在JavaScript中，实现图片上传前的本地预览是一项常见的需求，尤其在网页表单或...以上就是关于“js上传图片预览”的详细解释，希望对你的项目有所帮助。在实际应用中，可以根据具体需求对这些知识点进行扩展和优化。
"jquery上传图片预览"是Web开发中的一个常见功能，允许用户在提交图片到服务器之前先在页面上看到预览效果。这个功能提高了用户体验，让用户在上传之前可以确认图片的质量和方向，避免误传。 实现这一功能的关键...
本文将深入探讨“jQuery上传图片预览插件”，这是一个实用的工具，旨在提升用户在网页上上传图片时的体验。该插件在浏览器中提供了图片的实时预览功能，尤其在处理图片大小调整和等比例缩放方面表现卓越，同时兼容...
本篇将详细介绍如何在`.NET MVC`框架下，结合`HTML`、`JavaScript`（简称Js）和`jQuery`（简称JQ）实现"上传图片预览"功能，并限制上传的图片格式和大小。 首先，我们需要在前端页面创建一个`HTML`表单，包含一个`...
在这个场景中，"jsp上传图片预览"是一个常见的需求，它涉及到用户在上传图片前能够在网页上预览所选的图片。这一功能不仅提升了用户体验，也减少了因上传错误图片而导致的不必要的麻烦。 首先，我们需要了解图片...
**AjaxFileUpload上传图片预览技术详解** 在Web开发中，用户经常需要上传图片，而实时预览功能能显著提升用户体验。AjaxFileUpload是一个JavaScript组件，它允许我们实现异步文件上传并提供预览功能，无需刷新页面...
在网页开发中，JS上传图片预览功能是一个常见的需求，尤其在用户需要在提交之前查看即将上传图片的效果时。这个功能允许用户在正式上传图片到服务器之前，在客户端就能看到图片的预览效果，提升了用户体验。本文将...
首先，我们需要理解图片预览的基本原理。在用户选择一个图片文件后，我们通过JavaScript获取文件数据，然后利用HTML5的FileReader API读取文件内容，将其转化为base64编码的字符串，最后将这个字符串嵌入到一个`...
在这个"jquery 本地上传图片预览Demo"中，我们将关注jQuery插件的应用，尤其是与图片预览相关的技术。 首先，本地图片预览功能的核心在于读取用户选择的文件，并在不实际上传的情况下在浏览器中显示。在HTML5中，...
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
"另类待上传图片预览,效果还是可以的"这个标题表明我们关注的是一个非传统或者创新的图片预览解决方案，它能有效地展示待上传图片，并且在实际应用中表现良好。描述中的"希望对需要的朋友有所帮助"暗示了这是一个...