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 相关文章推荐
学习YUI.Ext 第三天
Mar 10 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
May 08 Javascript
jquery日历控件实现方法分享
Mar 07 Javascript
javascript常用功能汇总
Jul 05 Javascript
easyui datagrid 大数据加载效率慢,优化解决方法(推荐)
Nov 09 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
JavaScript实现简单生成随机颜色的方法
Sep 21 Javascript
微信小程序使用video组件播放视频功能示例【附源码下载】
Dec 08 Javascript
详解一个基于react+webpack的多页面应用配置
Jan 21 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 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
PHP7.0安装笔记整理
2015/08/28 PHP
php文件上传你必须知道的几点
2015/10/20 PHP
php基于openssl的rsa加密解密示例
2016/07/11 PHP
Yii CGridView用法实例详解
2016/07/12 PHP
如何通过Apache在本地配置多个虚拟主机
2020/07/29 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
IE6 hack for js 集锦
2014/09/23 Javascript
jQuery使用drag效果实现自由拖拽div
2015/06/11 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
jQuery窗口拖动功能的实现代码
2017/02/04 Javascript
轻松理解JavaScript闭包
2017/03/14 Javascript
js弹性势能动画之抛物线运动实例详解
2017/07/27 Javascript
Angularjs过滤器实现动态搜索与排序功能示例
2017/12/13 Javascript
vue 实现的树形菜的实例代码
2018/03/19 Javascript
基于vue实现可搜索下拉框定制组件
2020/03/26 Javascript
ionic grid(栅格)九宫格制作详解
2018/06/30 Javascript
VUE解决 v-html不能触发点击事件的问题
2019/10/28 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
在vue中使用image-webpack-loader实例
2020/11/12 Javascript
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
python中range()与xrange()用法分析
2016/09/21 Python
利用Python脚本实现ping百度和google的方法
2017/01/24 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
对Python 3.5拼接列表的新语法详解
2018/11/08 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
浅谈Python3中strip()、lstrip()、rstrip()用法详解
2019/04/29 Python
python实现图片素描效果
2020/09/26 Python
python解压zip包中文乱码解决方法
2020/11/27 Python
土耳其时尚购物网站:Morhipo
2017/09/04 全球购物
Bealls Florida百货商店:生活服饰、家居装饰和鞋子
2018/02/23 全球购物
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
播音主持专业个人自我评价
2014/01/09 职场文书
如何书写公司员工保密协议?
2019/06/27 职场文书
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技