最近项目中用到的图片上传前预览功能，兼容IE6-9，FF
<!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>
源码
http://www.cnblogs.com/load/archive/2012/03/06/2381657.html[color=red][/color]
分享到：
相关推荐
在JavaScript中，本地图片的预览和上传到服务器是一个常见的需求，特别是在Web应用中，比如社交媒体、博客编辑器或者在线图像处理工具。本项目着重于实现这个功能，提供了源码和工具来帮助开发者轻松实现这一过程。...
在图片上传中，JS通常用于处理用户选择文件后在本地预览图片，验证文件类型和大小，以及提供一个友好的用户体验，如进度条显示上传进度。 1. **图片预览**：使用HTML5的FileReader API，开发者可以读取用户选择的...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
在用户上传图片之前提供预览功能，能够提升用户体验，让用户在正式提交前确认图片效果。本项目着重讨论如何在Java JSP环境下实现本地图片的预览功能，结合jQuery库来增强前端交互。 首先，我们要理解JSP（Java...
"html网页js打开文件对话框带预览框.JS实现文件上传前先本地预览功能"这一主题主要关注如何利用JavaScript来实现在用户选择文件后，即刻在页面上进行预览，特别是对于图片文件的处理。以下将详细介绍这个过程及其...
虽然本地预览提供了良好的用户体验，但需要注意安全问题。Base64编码的图片数据可能会暴露用户硬盘上的敏感信息。因此，确保只预览用户预期上传的图片，避免其他文件类型的滥用。 5. **性能优化**： 对于大尺寸...
在网页开发中，多图片预览功能是必不可少的，尤其在涉及到用户上传图片...通过这些技术，开发者可以创建一个高效且友好的多图片上传预览功能，让用户在上传前就能看到即将上传的图片效果，从而减少错误和不必要的上传。
标题中的“本地图片上传即时预览”是一个常见的前端开发功能，尤其在网页表单、社交媒体应用或者在线编辑器中非常普遍。这个功能允许用户在选择本地图片后立即在页面上看到预览效果，无需等待图片实际上传到服务器。...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
在本项目中，"Jquery 表单验证+本地图片上传-切割-预览"是一个综合性的前端开发实例，它涵盖了几个重要的JavaScript库和技术，包括jQuery、表单验证、图片上传、图片切割以及预览功能。以下是这些知识点的详细解释：...
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
在IT领域，尤其是在Web开发中，用户界面的交互性至关重要，而"jQuery点击头像上传本地预览裁剪图片"就是一个提升用户体验的经典案例。这个功能允许用户在上传头像前预览并裁剪图片，提高了上传过程的可控性和便捷性...
在本主题中，我们将深入探讨如何实现"上传文件前，本地预览图片功能，支持所有主流浏览器"。 首先，我们需要了解这个功能的核心技术——HTML5的File API。File API提供了在浏览器中读取、操作和处理文件的能力，这...
在现代Web应用中，"上传图片本地预览效果"是一个常见的功能，特别是在社交媒体、电子商务、图像编辑等场景中。这个功能允许用户在选择图片后，无需等待上传完成就能在页面上即时预览所选的图片，提升了用户体验。...
### tinyMCE本地图片预览实现详解 #### 一、简介 tinyMCE是一款非常流行的开源富...通过上述步骤和技术细节，我们可以有效地实现在tinyMCE中本地预览图片的功能，这对于提高用户的编辑体验和工作效率具有重要意义。
【标题】"支持批量上传、JS图片预览的前端上传组件"所涉及的知识点主要集中在前端开发领域，尤其是文件上传和用户体验优化上。这个组件设计用于处理用户在Web应用中上传多个文件的需求，同时提供了图片预览功能，...
反之，data URL也可以转换为Blob对象进行上传。 综上所述，利用HTML5的File API和Canvas，我们可以在移动端实现图片上传时的本地预览和缩略图生成，提升用户交互体验。在实际项目中，还可以结合其他技术如Promise、...
在现代Web开发中，用户...总的来说，通过`URL.createObjectURL()`，我们可以方便地在用户选择图片后实现本地预览，提升上传图片的功能体验。结合其他前端技术，如Ajax异步上传，可以构建出更高效、友好的图片上传系统。
5. **显示预览**：将生成的Data URL赋值给img标签的src属性，显示预览图片。 6. **处理上传**：用户确认预览无误后，可以将原始文件或缩略图数据URL发送到服务器进行存储或进一步处理。 需要注意的是，这个过程...