lanrikey
- 浏览: 50371 次
- 来自: 深圳
-
文章分类
最新评论
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Js实现图片上传前在本地预览</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
//图片上传预览，IE用了滤镜
function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview">
<img id="imghead" width="100" height="100" border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Js实现图片上传前在本地预览</title>
<style type="text/css">
#preview{width:260px;height:190px;border:1px solid #000;overflow:hidden;}
#imghead {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);}
</style>
<script type="text/javascript">
//图片上传预览，IE用了滤镜
function previewImage(file)
{
var MAXWIDTH = 260;
var MAXHEIGHT = 180;
var div = document.getElementById('preview');
if (file.files && file.files[0])
{
div.innerHTML ='<img id=imghead>';
var img = document.getElementById('imghead');
img.onload = function(){
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
img.width = rect.width;
img.height = rect.height;
img.style.marginTop = rect.top+'px';
}
var reader = new FileReader();
reader.onload = function(evt){img.src = evt.target.result;}
reader.readAsDataURL(file.files[0]);
}
else //兼容IE
{
var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
file.select();
var src = document.selection.createRange().text;
div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead');
img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
}
}
function clacImgZoomParam( maxWidth, maxHeight, width, height ){
var param = {top:0, left:0, width:width, height:height};
if( width>maxWidth || height>maxHeight )
{
rateWidth = width / maxWidth;
rateHeight = height / maxHeight;
if( rateWidth > rateHeight )
{
param.width = maxWidth;
param.height = Math.round(height / rateWidth);
}else
{
param.width = Math.round(width / rateHeight);
param.height = maxHeight;
}
}
param.left = Math.round((maxWidth - param.width) / 2);
param.top = Math.round((maxHeight - param.height) / 2);
return param;
}
</script>
</head>
<body>
<div id="preview">
<img id="imghead" width="100" height="100" border=0 src='<%=request.getContextPath()%>/images/defaul.jpg'>
</div>
<input type="file" onchange="previewImage(this)" />
</body>
</html>
分享到：
发表评论
-
IE下使用uploadify上传文件的相关问题解决
2017-10-12 12:14 272SWFUpload.prototype.cleanUp = f ... -
js和java 中文乱码
2016-11-18 11:37 550因为在jsp中对中文进行了编码的时候用的是UTF-8的编码 ... -
js常用方法
2016-08-25 17:37 440当前返回日期yyyy-MM-dd function get ... -
js时间比较/当前时间
2015-12-03 21:49 470var selectDate=edit.getContro ... -
js map类型
2015-08-25 10:11 932<script> function Map2() ... -
javat替换成换行符，关于textarea中换行、回车、空格的识别与处理
2015-08-24 20:05 1628var newString=con.replace(/\n/ ... -
使用ajax和window.history.pushState无刷新改变页面内容和地址栏URL
2015-07-18 15:24 5023后退时关闭当前页面 < ... -
限制文本框只能输入数字
2015-07-07 15:59 395js控制只允许输入数字 avascript 只允许输入数字有很 ... -
正确优雅的解决用户退出问题——JSP和Struts解决方案(转载)
2015-07-06 17:37 499正确优雅的解决用户退出问题——JSP和Struts解决方案(转 ... -
长度限制
2015-06-12 16:56 646//=============得到输入框长度（包括中文）=== ... -
js input即时监听输入值
2015-06-08 17:01 2517总结一下 ：要想在输入框超过限制长度时候，不给输入。之前是用o ... -
回车和点击实现表单提交
2015-06-02 14:06 403<html> <head> <t ... -
js记录用户名密码 COOKIE
2015-06-02 10:43 806记录COOKIE后，当取消复选框时 发现无法删除COOKIE。 ... -
获取系统当前时间 适合用于头部
2015-05-26 16:26 426<!DOCTYPE HTML PUBLIC " ... -
JS 将字符串转换成日期类型
2015-05-22 14:52 627JS 将字符串转换成日期类型 2013-06-19 17:48 ... -
JS函数中带与不带括号的区别
2015-05-21 18:16 424JS函数中带与不带括号的区别 其实总结起来如下： 函数只要是要 ... -
JS 字符串长度判断
2015-05-20 10:08 1647content.replaceAll("(\r\n| ... -
js开发遇到在方法中调用另一方法问题
2015-05-19 18:03 496/eas_crm_dayi/WebContent/ecp/pa ...
相关推荐
html file控件选择文件后立即预览 js实现 JS实现图片上传前先图片预览功能
html5以及jQuery实现本地图片上传前的预览代码实例讲解 html5以及jQuery实现本地图片上传前的预览，效果类似如下： 选择图片前的页面： 选择图片之后的预览效果： 下面直接上代码（只是最简单的实现代码，css...
主要介绍了JS+HTML5实现上传图片预览效果,结合完整实例形式分析了javascript上传图片本地预览的具体操作步骤与相关实现技巧,需要的朋友可以参考下
1 上传图片前实现本地预览图片。 2 兼容ie,firefox 3 实现判断文件大小。火狐下实现了上传前判断图片大小，ie下目前是采用ActiveXObject方法，但会弹框提示，不友好，提供ajax方式后台判断文件大小。 4 判断图片类型...
写在前面：计划实现图片上传预览功能，但是本地图片上传所获得路径为 C:\fakepath\”+文件名的形式，得不到文件真实路径，所以无法直接预览，于是采用将图片上传至服务器，传回服务器路径，实现预览。前端采用通过...
本地图片预览 html+js 本地 图片 预览 html+js 不需要上传 预览
上传图片的project 博文链接：https://alisdame.iteye.com/blog/2163940
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...
js加iframe轻松实现异步图片上传 可以预览 兼容FF，chrome，ie9
图片上传，html页面，本地预览，后台前台页面代码都有
图片的上传预览功能主要用于图片上传前的一个效果的预览，目前主流的方法主要有js，jquery与flash实现，但我们一般都会使用js来实现图片上传预览功能，下面来看一个例子。 原理: 分为两步：当上传图片的input被触发...
主要介绍了原生js FileReader对象实现图片上传本地预览效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
插件描述：js上传图片本地预览。 参考实例：http://www.jq22.com/jquery-info6180
js实现头像上传并且可预览提交 在用户注册账号或者修改资料的时候会需要用户在本地选择一张图片作为头像，并同时预览， 常见的思路有两种：一是将图片上传至服务器的临时文件夹中，并返回该图片的url，然后渲染在...
cupload本地图片上传预览插件
在上传图片时，经常需要预览图片。 本用例使用html5+js实现上传图片的本地预览。鼠标移至预览图片可以显示大图。
js+asp.net 多图片上传+预览
主要介绍了JavaScript实现图片本地预览功能,针对非IE浏览器的HTML5滤镜功能及IE浏览器的相关组件功能实现不上传至服务器预览本地图片的效果,需要的朋友可以参考下
layui的cropper裁剪插件，图片采集，用于在线裁剪图片生成,无须上传在线预览裁剪图片。
图片上传预览是一种在图片上传之前对图片进行本地预览的技术。 使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。 但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。 不过群众的智慧是...