js上传图片预览的实现方法


Posted in Javascript onMay 09, 2017

本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下

<html >

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>图片上传本地预览</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.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>  
</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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
jQuery实现仿Google首页拖动效果的方法
May 04 Javascript
直接拿来用的15个jQuery代码片段
Sep 23 Javascript
JS实现登录页面记住密码和enter键登录方法推荐
May 10 Javascript
详解JS几种变量交换方式以及性能分析对比
Nov 25 Javascript
node实现简单的反向代理服务器
Jul 26 Javascript
JS实现合并json对象的方法
Oct 10 Javascript
JS实现显示当前日期的实例代码
Jul 03 Javascript
JS在if中的强制类型转换方式
Jul 15 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
Aug 26 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 #Javascript
Vue2单一事件管理组件通信
May 09 #Javascript
react-router实现按需加载
May 09 #Javascript
BootStrap表单时间选择器详解
May 09 #Javascript
兼容浏览器的js事件绑定函数(详解)
May 09 #Javascript
JS触摸与手势事件详解
May 09 #Javascript
Angualrjs 表单验证的两种方式(失去焦点验证和点击提交验证)
May 09 #Javascript
You might like
vBulletin HACK----显示话题大小和打开新窗口于论坛索引页
2006/10/09 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
php使用wordwrap格式化文本段落的方法
2015/03/17 PHP
php实现的网络相册图片防盗链完美破解方法
2015/07/01 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP简单实现二维数组的矩阵转置操作示例
2017/11/24 PHP
PHP学习笔记之session
2018/05/06 PHP
jQuery 技巧小结
2010/04/02 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
2013/03/05 Javascript
热点新闻滚动特效的js代码
2013/08/17 Javascript
javascript基本包装类型介绍
2015/04/10 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
JavaScript创建防篡改对象的方法分析
2018/12/30 Javascript
react实现同页面三级跳转路由布局
2019/09/26 Javascript
jquery实现直播视频弹幕效果
2020/02/25 jQuery
vue iview 隐藏Table组件里的某一列操作
2020/11/13 Javascript
[01:12]DOTA2次级职业联赛 - Newbee.Y 战队宣传片
2014/12/01 DOTA
[38:40]2018DOTA2亚洲邀请赛 4.6淘汰赛 mineski vs LGD 第一场
2018/04/10 DOTA
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
Django权限机制实现代码详解
2018/02/05 Python
pyhanlp安装介绍和简单应用
2019/02/22 Python
python实现中文文本分句的例子
2019/07/15 Python
python关于变量名的基础知识点
2020/03/03 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
Keras 中Leaky ReLU等高级激活函数的用法
2020/07/05 Python
HTML5为输入框添加语音输入功能的实现方法
2017/02/06 HTML / CSS
世界上最大的艺术和工艺用品商店:MisterArt.com
2018/07/13 全球购物
物流管理应届生求职信
2013/11/07 职场文书
赡养老人协议书
2014/04/21 职场文书
学校春季防火方案
2014/06/08 职场文书
增员口号大全
2014/06/18 职场文书
2014年精神文明建设工作总结
2014/11/19 职场文书
写给领导的感谢信
2015/01/22 职场文书