用户上传本地磁盘中的一个图片文件作为头像
2017-07-16 14:23
393 查看
<script type="text/javascript">
//图片上传预览 IE是用了滤镜。
function previewImage(file)
{
var MAXWIDTH = 180;
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.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 //兼容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>
//图片上传预览 IE是用了滤镜。
function previewImage(file)
{
var MAXWIDTH = 180;
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.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 //兼容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>
相关文章推荐
- 用户上传本地磁盘中的一个图片文件作为头像
- 完成一个个人博客,博客头像可上传本地图片;部分图片实现点击看大图功能
- 选择本地图片上传到服务器进行头像设置以及文件下载
- bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
- ASP 实例:头像上传。文件(图片)上传,头像截取(Jquery的imgAreaSelect插件来选取截取区域)
- Android设置头像,手机拍照或从本地相册选取图片作为头像
- 文件存到本地---SSM配置Ueditor实现图片的上传
- html 点击选择本地文件(图片)显示和上传
- 从0开始做一个的Vue图片/ 文件选择(上传)组件[基础向]
- Android设置头像,手机拍照或从本地相册选取图片作为头像
- 修改fckeditor使上传文件按用户id分目录存放,其上传图片加水印及缩略图
- 浅谈 Html5 带进度条的的文件图片(带本地回显)上传(er)
- ajax上传图片加裁剪作为头像
- 搭建一个Tomcat,作为图片服务器,异步上传图片
- PictureBox从本地上传图片和保存在磁盘目录
- h5实现本地图片或文件的上传
- android 用户头像,图片裁剪,上传并附带用户数据base64code 方式
- (101)Tcp网络编程练习:上传文件、上传图片、用户登录
- 让FreeTextBox(一个HTML编辑器) 支持上传本地图片并插入编辑器中
- 兼容ie6、ie7、ie8 和FF的本地上传图片预览,并客户端判断文件大小和文件格式