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 相关文章推荐
关于文本限制字数的js代码
Apr 02 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
Sep 15 Javascript
精通Javascript系列之Javascript基础篇
Jun 07 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
asp.net+jquery.form实现图片异步上传的方法(附jquery.form.js下载)
May 05 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
layer ui 导入文件之前传入数据的实例
Sep 23 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 Javascript
js实现文字头像的生成代码
Mar 07 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 Javascript
通过vue刷新左侧菜单栏操作
Aug 06 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
ThinkPHP连接数据库及主从数据库的设置教程
2014/08/22 PHP
PHP高级编程实例:编写守护进程
2014/09/02 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
javascript:文字不间断向左移动的实例代码
2013/08/08 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
调用innerHTML之后onclick失效问题的解决方法
2014/01/28 Javascript
JavaScript中document对象使用详解
2015/01/06 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
深入理解Vue-cli搭建项目后的目录结构探秘
2017/07/13 Javascript
微信小程序基于picker实现级联菜单
2019/02/15 Javascript
element ui分页多选,翻页记忆的实例
2019/09/03 Javascript
通过实例解析JavaScript常用排序算法
2020/09/02 Javascript
[04:29]【TI9采访】OG.N0tail在胜者组决赛后接受采访
2019/08/25 DOTA
Python日期操作学习笔记
2008/10/07 Python
python简单实现旋转图片的方法
2015/05/30 Python
常见python正则用法的简单实例
2016/06/21 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
Python 面向对象部分知识点小结
2020/03/09 Python
python中复数的共轭复数知识点总结
2020/12/06 Python
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
出纳工作岗位责任制
2014/02/02 职场文书
人事科岗位职责范本
2014/03/02 职场文书
成龙霸王洗发水广告词
2014/03/14 职场文书
表彰大会策划方案
2014/05/13 职场文书
旷工辞退通知书
2015/04/17 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang
在项目中使用redis做缓存的一些思路
2021/09/14 Redis
Python 图片添加美颜效果
2022/04/28 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL
python数字图像处理之对比度与亮度调整示例
2022/06/28 Python