注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

Jon的毛线球

叩首问路,码梦维生。

 
 
 

日志

 
 

JS 读取上传图片  

2015-08-25 16:36:48|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在上传图片前预览图片的功能,可提高你网站的用户体验,让用户清楚所要上传的图片是不是选对了。上网找了很多资料要门用 AX 要么就无效 ,最后在公司牛人的帮助下找到了一下代码。本代码无JS插件,纯JavaScript结合HTML来实现,是一个很不错的例子,比较完整:
作为笔记记录下来。

<style type="text/css">
#preview {
width: 100px;
height: 100px;
border: 1px solid #000;
overflow: hidden;
}

#imghead {
filter: progid: DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
}
</style>
<script type="text/javascript">
function previewImage(file)

{

var MAXWIDTH = 100;

var MAXHEIGHT = 100;

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.marginLeft = rect.left + 'px';

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 {
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;margin-left:" + rect.left + "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>

<body>
<div id="preview">
<img id="imghead" width="100" height="100" border="0" src='../images/demo.jpg'>
<!--无预览时的默认图像,自己弄一个-->
</div>
<br/>
<input type="file" onchange="previewImage(this)" />
</body>



  评论这张
 
阅读(32)| 评论(3)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017