需要用到图片上传前的预览效果
找了好久......
http://www.uploadify.com/download/
http://www.cnblogs.com/boychenney/archive/2011/10/08/2203036.html
http://www.cnblogs.com/oec2003/archive/2010/01/06/1640027.html
http://www.cnblogs.com/cloudgamer/archive/2009/12/22/ImagePreview.html
http://hi.baidu.com/%B7%E7%BE%B0%D2%BB%C2%B7%C3%C0%BA%C3/blog/item/5729103b79e5c4ccd56225ab.html
浏览器的兼容是个很大的问题
以下ie8,测试通过,但是ff,chrome不行
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form action="" method="post" enctype="multipart/form-data" name="form1">
<input name="attach" type="file" onchange="javascript:ShowImg(this.value);" onKeyDown="javascript:return(false);" size="20">
<script language="JavaScript">
function ShowImg(src)
{
document.getElementById("imgDiv").innerHTML="图片预览：<br><img id='imgObj' onload='javascript:GetSize()' src='file:///" + src + "'>";
}
function GetSize()
{
var width,height;
var imgObj=document.getElementById("imgObj");
width=imgObj.width;
height=imgObj.height;
document.getElementById("err_msg").innerHTML="图片大小(宽×高):<font color=red>" + width + "×" + height + "</font>";
if(width>164){
imgObj.width=164;
imgObj.height=imgObj.height/(imgObj.width/164);
}
}
/*
function GetError()
{
document.getElementById("err_msg").innerHTML="图片大小(宽×高):<font color=red>NaN</font>";
//document.getElementById("imgDiv").innerHTML="";
//document.getElementById("err_msg").innerHTML="图片文件不存在或格式错误！"
}
*/
</script>
<div id="imgDiv" align="center"></div>
<div id="err_msg" align="center"></div>
</form>
</body>
</html>
分享到：
相关推荐
实现JavaScript图片上传预览效果主要涉及以下步骤： 1. **文件选择**：在HTML中添加`<input type="file">`元素，让用户选择图片。通过设置`accept`属性限制只能选择图片文件。 2. **事件监听**：使用JavaScript...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
以上就是关于"JavaScript图片上传预览效果(JSP)"的相关知识点，涵盖了前端的图片预览、文件读取、AJAX上传，以及后端的JSP处理和安全措施。在实际项目中，这些技术组合起来可以构建出一个功能完善的图片上传系统。
在JavaScript编程中，实现上传图片的预览效果是一项常见的需求，尤其在网页表单和多媒体交互...这些文件名表明了实现这一功能的关键组件，通过结合它们，可以创建一个在多个浏览器环境下都能工作的图片上传预览系统。
总之，JavaScript图片上传预览功能涉及HTML、CSS、JavaScript基础，以及FileReader API、canvas等高级特性。通过合理组合这些技术，我们可以创建出一个既高效又用户体验良好的图片上传预览系统。
在JavaScript中实现图片上传预览效果是Web开发中常见的需求，尤其在用户需要在提交前查看上传图片的情况下。这一功能可以提升用户体验，确保用户知道自己上传的图片是什么样子。以下将详细讲解如何使用JavaScript来...
这个插件的标题"图片上传预览效果，很小的一个插件"表明它是一个轻量级的解决方案，专为实现快速、便捷的图片预览而设计。描述中提到"实现简单的图片上传预览，非常小的插件，自己写的，很好用"，这暗示了该插件是由...
在本文中，我们将深入探讨如何使用纯JavaScript实现上传图片前的预览功能，并且检查图片的大小，确保兼容性覆盖到IE7至IE10、Firefox以及Chrome等主流浏览器。这个功能对于用户交互体验有着重要的作用，因为它允许...
"html+javascript头像上传预览"是利用HTML和JavaScript技术实现的一种交互方式，它允许用户在提交头像之前预览选定的图片，提供更好的用户体验。在此过程中，CSS可能用于美化和定制预览效果，例如将头像显示为圆形。...
标题提到的"兼容IE6,IE7,IE8和Firefox的图片上传预览效果"直指浏览器兼容性问题，这是一个在过去很长一段时间内困扰开发者的关键挑战。由于早期的Internet Explorer（IE6, IE7, IE8）对现代Web标准的支持不足，而...
下面我们将详细讨论如何使用原生JavaScript实现这样一个简单的头像图片上传预览效果。 首先，我们需要一个HTML结构来接收用户的选择。通常，我们会使用`<input type="file">`元素让用户选择图片，以及一个`<img>`...
Bootstrap图片上传和预览是网页开发中的一个常见功能，它结合了美观的界面设计与实用的文件处理技术。Bootstrap是一个流行的前端开发框架，提供了一系列组件和工具，使得开发者能够快速构建响应式、移动设备优先的...
在IT领域，多图片上传预览插件是网站或应用程序中常见的一种功能，它允许用户在上传图片到服务器之前进行在线预览。这样的插件极大地提升了用户体验，因为用户可以在正式提交之前检查图片的质量、方向和效果。下面...
以上代码实现了基本的图片上传和预览功能，但实际应用中可能还需要考虑其他方面，例如错误处理、文件名冲突、安全检查（防止恶意文件上传）、图像尺寸调整等。你可以根据项目需求进一步扩展这些功能，例如通过GD库或...
图片上传预览 *"> 图片预览"> document.getElementById('imageInput').addEventListener('change', function(e) { var file = e.target.files[0]; if (!file.type.startsWith('image/')) { alert('请...
本项目采用原生JavaScript实现了这样一个图片上传预览插件，无需依赖jQuery或其他第三方库，使代码更加轻量级且易于理解。以下是关于这个插件实现的一些关键知识点： 1. **FileReader API**：JavaScript的...
在IT领域，图片上传本地预览插件是一个常见的功能组件，尤其在网页应用和桌面软件中，它极大地提升了用户体验。这个插件的核心作用是让用户在实际上传图片到服务器之前，能够在本地环境中预览图片效果，确保图片的...