需要用到图片上传前的预览效果
找了好久......
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>
分享到:
相关推荐
图片预览 js图片上传预览 JavaScript图片上传预览效果
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 但随着浏览器安全性的提高,要实现图片上传预览也越来越困难。 不过群众的智慧是...
javascript 上传图片预览效果,兼容:ie6/7/8, firefox 3.5.5
JavaScript 上传图片预览效果.zip
好东西部多说,很实用。随着浏览器安全性的提高,要实现图片预览也越来越困难。 不过群众的智慧是无限的,网上也有很多变通或先进的方法来...上次写的简便无刷新文件上传系统最初的目的就是用来实现这个图片预览效果
找了很多资料,整理了一下,原理大概分为两部分:一个是前台用JavaScript对图片进行定位预览,JavaScript并不能对图片进行剪裁,所以第二步是需要把图片及其预览结果传递给JAVA进行剪裁。这里提供了前台的图片预览和...
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
主要为大家详细介绍了JavaScript使用FileReader实现图片上传预览效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
就像这个图片预览小功能一样,不要说它很小,但是它发挥的作用很明显,在上传前预览一下图片,以免选择了错误的文件,上次写的无刷新文件上传系统最初的目的就是用来实现这个图片预览效果,程序中的JavaScript部分...
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片,而不需上传服务器,提高用户体验。 本实例通过JavaScript实现图片预览效果,代码很简单,可支持IE和火狐!
图片的上传预览功能主要用于图片上传前的一个效果的预览,目前主流的方法主要有js,jquery与flash实现,但我们一般都会使用js来实现图片上传预览功能,下面来看一个例子。 原理: 分为两步:当上传图片的input被触发...
本文实例介绍了javascript实现input file上传图片预览效果的详细代码,分享给大家供大家参考,具体内容如下 运行效果图: 具体实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8...
Cloudgamer JavaScript Library Author: Project in Chinese Animations [AlertBox 弹出层(信息提示框)效果] () [JavaScript 图片3D展示空间...[JavaScript 图片上传预览效果] () [简便无刷新文件上传系统] () Read
选择图片前的页面: 选择图片之后的预览效果: 下面直接上代码(只是最简单的实现代码,css样式没有复制,自己随意发挥) <!DOCTYPE html> <html> <head> <title>HTML5上传图片预览</title> ; ...
今天用alphaimageloader滤镜的src属就是其中的主角它将使用绝对或相对url地址指定背景图像。假如忽略此参数,滤镜将不会作用。 代码如下: <!doctype html public “-//w3c//dtd xhtml ... <head> <... chars
上传图片前预览图片这种效果应用比较广泛,实现的方也大同小异,下面为大家介绍下,在javascript中是如何实现的,感兴趣的朋友可以参考下