js实现上传图片及时预览


Posted in Javascript onMay 07, 2016

本文实例为大家分享了javascript图片预览功能实现的具体代码,供大家参考,具体内容如下

先为大家分享一段关于js图片预览的代码,兼容火狐和谷歌浏览器

/* 案例展示图片预览 */
$(function(){
  $("#file0").bind("change",function(){
 
    clickupLoad();
  });
});
function clickupLoad(){
 
  var imgObject = document.getElementById('file0');
  var getImageSrc = getFullPath(imgObject); // 本地路径
  var srcs = window.URL.createObjectURL(imgObject.files[0]);
  var pos = getImageSrc.lastIndexOf(".");
  var lastname = getImageSrc.substring(pos, getImageSrc.length) // 图片后缀]
   
  if(srcs!=""){
    $("#yulan2").attr("src",srcs);
  }else{
    alert("请选择一张图片");
  }
   
}
function getFullPath(obj) {  //得到图片的完整路径
  if (obj)
  {
    if (window.navigator.userAgent.indexOf("MSIE") >= 1){
      obj.select();
      return document.selection.createRange().text;
     
    }else if(window.navigator.userAgent.indexOf("Firefox") >= 1) {
      if (obj.files) {
        return window.URL.createObjectURL(obj.files[0]);
      }
      return obj.value;
    }
    return obj.value;
  }
}

实例代码实现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 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.2 0
Mar 22 Javascript
jQuery Ajax中的事件详细介绍
Apr 16 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
js判断出两个字符串最大子串的函数实现方法
Nov 01 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
Mar 29 Javascript
利用node.js写一个爬取知乎妹纸图的小爬虫
May 03 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
Jun 17 Javascript
js指定步长实现单方向匀速运动
Jul 17 Javascript
详解html-webpack-plugin插件(用法总结)
Sep 12 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 #Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 #Javascript
深入解析Backbone.js框架的依赖库Underscore.js的作用
May 07 #Javascript
JavaScript的Backbone.js框架入门学习指引
May 07 #Javascript
JavaScript数组方法总结分析
May 06 #Javascript
JS平滑无缝滚动效果的实现代码
May 06 #Javascript
使用AJAX实现Web页面进度条的实例分享
May 06 #Javascript
You might like
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php中__destruct与register_shutdown_function执行的先后顺序问题
2014/10/17 PHP
jQuery 表单验证扩展代码(二)
2010/10/20 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
vue2.0 keep-alive最佳实践
2017/07/06 Javascript
如何理解Vue的v-model指令的使用方法
2018/07/19 Javascript
详解小程序不同页面之间通讯的解决方案
2018/11/23 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
[51:26]VP vs VG 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python基于socket实现网络广播的方法
2015/04/29 Python
python读取oracle函数返回值
2016/07/18 Python
一条命令解决mac版本python IDLE不能输入中文问题
2018/05/15 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
Python实现随机创建电话号码的方法示例
2018/12/07 Python
带你彻底搞懂python操作mysql数据库(cursor游标讲解)
2020/01/06 Python
python opencv 图像边框(填充)添加及图像混合的实现方法(末尾实现类似幻灯片渐变的效果)
2020/03/09 Python
python3爬虫中异步协程的用法
2020/07/10 Python
简述 Python 的类和对象
2020/08/21 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
巴西箱包、背包、钱包和旅行配件购物网站:Inovathi
2019/12/14 全球购物
机电一体化专业应届生求职信
2013/11/27 职场文书
大学生自我鉴定
2013/12/16 职场文书
大学军训感言1000字
2014/02/25 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
十八大观后感
2015/06/12 职场文书
公司考勤管理制度
2015/08/04 职场文书
pandas取dataframe特定行列的实现方法
2021/05/24 Python
教你怎么用Python实现GIF动图的提取及合成
2021/06/15 Python
vue中data里面的数据相互使用方式
2022/06/05 Vue.js