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 相关文章推荐
推荐dojo学习笔记
Mar 24 Javascript
模仿JQuery.extend函数扩展自己对象的js代码
Dec 09 Javascript
js 判断计算字符串长度/判断空的简单方法
Aug 05 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
学JavaScript七大注意事项【必看】
May 04 Javascript
JavaScript随机生成颜色的方法
Oct 15 Javascript
vue-router实现tab标签页(单页面)详解
Oct 17 Javascript
通过vue提供的keep-alive减少对服务器的请求次数
Apr 01 Javascript
vue cli升级webapck4总结
Apr 04 Javascript
ES6之Proxy的get方法详解
Oct 11 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
Nov 19 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
用PHP获取Google AJAX Search API 数据的代码
2010/03/12 PHP
PHP中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
PHP微信刮刮卡 附微信接口
2016/07/22 PHP
关于PHP转换超过2038年日期出错的问题解决
2017/06/28 PHP
PHP使用Redis实现Session共享的实现示例
2019/05/12 PHP
Use Word to Search for Files
2007/06/15 Javascript
jquery $.ajax各个事件执行顺序
2010/10/15 Javascript
基于jquery的jqDnR拖拽溢出的修改
2011/02/12 Javascript
div拖拽插件——JQ.MoveBox.js(自制JQ插件)
2013/05/17 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
jquery-mobile表单的创建方法详解
2016/11/23 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
js笔试题-接收get请求参数
2019/06/15 Javascript
vue日历/日程提醒/html5本地缓存功能
2019/09/02 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
python将图片文件转换成base64编码的方法
2015/03/14 Python
在Django中创建URLconf相关的通用视图的方法
2015/07/20 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python判断列表是否已排序的各种方法及其性能分析
2016/06/20 Python
选择Python写网络爬虫的优势和理由
2019/07/07 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
雪花秀美国官方网站:韩国著名草本护肤化妆品品牌
2016/10/19 全球购物
navabi英国:设计师大码女装
2019/06/25 全球购物
Chain Reaction Cycles俄罗斯:世界上最大的在线自行车商店
2019/08/27 全球购物
俄罗斯便宜的在线服装商店:GroupPrice
2020/04/10 全球购物
大学同学聚会邀请函
2014/01/19 职场文书
预备党员2014全国两会学习心得体会
2014/03/10 职场文书
“六查”、“三学”、“三干”查摆问题整改措施
2014/09/27 职场文书
人事局接收函
2015/01/30 职场文书
学校捐书活动总结
2015/05/08 职场文书
浅谈Python类的单继承相关知识
2021/05/12 Python