转自：http://blog.csdn.net/fengyeen/article/details/7785355
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<body>
<input type=file name="doc" id="doc" onchange="javascript:setImagePreview();">
<p>
<div id="localImag"><img id="preview" width=-1 height=-1 style="diplay:none" /></div>
</p>
<script>
function setImagePreview() {
var docObj=document.getElementById("doc");
var imgObjPreview=document.getElementById("preview");
if(docObj.files && docObj.files[0]){
//火狐下，直接设img属性
imgObjPreview.style.display = 'block';
imgObjPreview.style.width = '300px';
imgObjPreview.style.height = '120px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();
//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
}else{
//IE下，使用滤镜
docObj.select();
var imgSrc = document.selection.createRange().text;
var localImagId = document.getElementById("localImag");
//必须设置初始大小
localImagId.style.width = "300px";
localImagId.style.height = "120px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
try{
localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
}catch(e){
alert("您上传的图片格式不正确，请重新选择!");
return false;
}
imgObjPreview.style.display = 'none';
document.selection.empty();
}
return true;
}
</script>
</body>
</html>
相关推荐
js实现图片上传预览功能，自己稍微加工了一下，这个在IE9上面挺有意思的，alert(img.offsetWidth+"---"+img.offsetHeight);第一次输出每次都是28---30，第二次之后就会显示图片的实际大小，具体原理不懂，有明白的...
本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且易于理解。以下是关于这个插件实现的一些关键知识点： 1. **FileReader API**：JavaScript的...
"原生JS实现图片上传前的预览"是一个基础但至关重要的技术点，尤其对于初学者而言，掌握这一技能能够提升项目的交互体验。在这个场景下，我们通常会用到HTML5中的File API，它提供了对用户选择的文件进行读取、操作...
"JS上传图片预览技术" 在Web开发中，上传图片预览...JS上传图片预览技术是通过 HTML、CSS 和 JavaScript 实现的，该技术可以跨浏览器实现图片上传预览功能，並且能够自动调整图片的尺寸以适应不同的浏览器和屏幕尺寸。
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览dom原理实现js上传图片预览...
以上就是基于JavaScript实现图片上传预览效果的基本过程。通过理解这些关键步骤和文件作用，开发者可以创建一个功能完善的图片上传预览系统。在实际开发中，还应注意兼容性、性能优化和安全问题，例如限制文件大小、...
在JavaScript中实现图片上传并预览功能是一项常见的前端任务，主要涉及到HTML5的File API、Canvas以及Ajax异步请求等技术。以下将详细介绍这个过程中的关键知识点。 1. **File API**：HTML5引入的File API允许我们...
在本文中，我们将深入探讨如何使用JavaScript（JS）与ASP.NET技术实现图片上传、预览以及支持多文件上传和上传前预览的功能。这个技术组合是现代Web应用中常见的需求，尤其是在用户交互丰富的网站和应用中。 首先，...
综上所述，实现图片预览功能需要前端和后端的协同工作。前端利用File API读取并显示图片，后端则负责接收、处理图片并提供预览的URL。这个过程涉及到文件上传、图片处理、安全控制等多个环节，每个环节都需要根据...
本文详细介绍了如何在*** MVC框架中实现图片上传和预览显示的整个过程，这包括前端页面设计、后端控制器和模型的构建、以及与数据库的交互处理。以下是对本文描述的知识点详细说明。 1. 图片上传与存储 *** MVC应用...
通过调用FileReader的readAsDataURL方法，我们可以将图片文件内容转化为Base64编码的字符串，这个字符串可以直接嵌入到`<img>`标签的`src`属性中，实现图片的预览。 在`index.html`中，通常会有如下的HTML结构，...
在这个场景下，我们讨论的是如何在Bootstrap环境中实现图片的上传和预览功能。 首先，我们要了解`bootstrap-fileinput`，这是一个基于Bootstrap的高级文件输入插件，由Krajee提供。这个插件极大地扩展了...
在本文中，我们将深入探讨如何使用AngularJS框架来实现图片上传和预览功能。AngularJS，作为一款强大的前端JavaScript框架，提供了丰富的功能和模块化设计，使得开发动态Web应用变得更加简单。图片上传和预览是现代...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
【zyUpload实现图片预览上传】是一个用于网页端图片上传并提供预览功能的解决方案，它支持HTML5、Java和PHP等技术。这个工具的主要优点是用户在上传图片之前可以预览效果，增强了用户体验，同时也提供了多语言后端...
其中，图片上传预览功能是许多应用场景中的一个重要环节，例如社交媒体、在线购物平台等。通过使用jQuery库，我们可以轻松地实现一个既实用又具有交互性的图片预览效果。本文将详细介绍如何利用jQuery来实现上传图片...
在JavaScript编程中，预览图片是一项常见的需求，特别是在文件上传功能中。用户在选择图片文件后，能够在上传之前先预览图片，这样可以提供更好的用户体验，确保用户上传的图片符合预期。这个标题提到的"js预览图片 ...
#### 一、JS 实现图片上传预览功能 **知识点概述：** 本案例展示了如何利用JavaScript实现用户在选择图片后立即预览的效果。这对于需要即时反馈的应用场景非常有用，比如社交媒体头像上传、产品图片上传等。 **...
综上所述，利用JavaScript和HTML5的特性，我们可以轻松实现图片上传的预览功能，从而为用户提供更直观、友好的交互体验。在实际项目中，可能还需要考虑错误处理、兼容性问题以及安全性措施，例如限制文件大小和类型...