脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js上传图片预览的方法

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

 更新时间：2017年05月09日 15:13:23   作者：猛男史86  
这篇文章主要为大家详细介绍了js上传图片预览的实现方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • A标签触发onclick事件而不跳转的多种解决方法

    A标签触发onclick事件而不跳转的多种解决方法

    一个标签仅仅是要触发onclick行为，遇到了A标签触发onclick事件时不执行跳转，下面与大家分享下四种解决方法，感兴趣的朋友可以参考下哈
    2013-06-06
  • 浅谈Javascript数据属性与访问器属性

    浅谈Javascript数据属性与访问器属性

    下面小编就为大家带来一篇浅谈Javascript数据属性与访问器属性。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • TypeScript接口和类型的区别小结

    TypeScript接口和类型的区别小结

    在 TypeScript 中，有两种主要的定义自定义类型的方式，接口和类型，尽管它们在外观上可能相似，但它们之间有一些关键的区别，本文就详细的介绍一下，感兴趣的可以了解下
    2023-05-05
  • 小程序实现列表删除功能

    小程序实现列表删除功能

    这篇文章主要为大家详细介绍了小程序实现列表删除功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2018-10-10
  • JS实现超简单的汉字转拼音功能示例

    JS实现超简单的汉字转拼音功能示例

    这篇文章主要介绍了JS实现超简单的汉字转拼音功能,结合实例形式分析了javascript汉字转换成拼音的函数定义与使用技巧,需要的朋友可以参考下
    2016-12-12
  • webpack output.library的16 种取值方法示例

    webpack output.library的16 种取值方法示例

    这篇文章主要为大家介绍了webpack output.library的16 种取值方法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • Javascript加载速度慢的解决方案

    Javascript加载速度慢的解决方案

    在网站里面会加载一些js代码,统计啊,百度广告等等，结果弄得页面加载速度很慢，下面有个不错的解决方法，大家可以参考下
    2014-03-03
  • TableSort.js表格排序插件使用方法详解

    TableSort.js表格排序插件使用方法详解

    这篇文章主要为大家详细介绍了TableSort.js表格排序插件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 基于JavaScript实现交互式博客

    基于JavaScript实现交互式博客

    在Web开发中,JavaScript（JS）是一种至关重要的编程语言,它使网页具有交互性,本文主要介绍了如何使用JavaScript实现一个交互式博客,需要的可以了解下
    2024-01-01
  • uniapp组件传值的方法(父传子,子传父,对象传值)实战案例

    uniapp组件传值的方法(父传子,子传父,对象传值)实战案例

    现在的前端开发中基本上都是组件化开发的,下面这篇文章主要给大家介绍了关于uniapp组件传值(父传子,子传父,对象传值)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03

最新评论