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下查找父节点的简单方法
Aug 13 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
Bootstrap 粘页脚效果
Mar 28 Javascript
深入理解jquery自定义动画animate()
May 24 Javascript
Bootstrap图片轮播组件Carousel使用方法详解
Oct 20 Javascript
原生js开发的日历插件
Feb 04 Javascript
JS常用倒计时代码实例总结
Feb 07 Javascript
详解JavaScript中return的用法
May 08 Javascript
javascript编程开发中取色器及封装$函数用法示例
Aug 09 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 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
php中将一个对象保存到Session中的方法
2015/03/13 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
php的debug相关函数用法示例
2016/07/11 PHP
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
使用insertAfter()方法在现有元素后添加一个新元素
2014/05/28 Javascript
JavaScript的事件代理和委托实例分析
2015/03/25 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
JavaScript中创建对象的7种模式详解
2017/02/21 Javascript
详解基于node的前端项目编译时内存溢出问题
2017/08/01 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
小程序图片剪裁加旋转的示例代码
2018/07/10 Javascript
微信小程序Getuserinfo解决方案图解
2018/08/24 Javascript
JS匿名函数内部this指向问题详析
2019/05/10 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
python遍历 truple list dictionary的几种方法总结
2016/09/11 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
python+influxdb+shell编写区域网络状况表
2018/07/27 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
pytorch 常用线性函数详解
2020/01/15 Python
python GUI库图形界面开发之PyQt5信号与槽多窗口数据传递详细使用方法与实例
2020/03/08 Python
使用Dajngo 通过代码添加xadmin用户和权限(组)
2020/07/03 Python
分享一个H5原生form表单的checkbox特效代码
2018/02/26 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
美国最大婚纱连锁店运营商:David’s Bridal
2019/03/12 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
土木工程毕业生自荐信
2013/09/21 职场文书
婚前保证书
2014/04/29 职场文书
法人任命书范本
2014/06/04 职场文书
好好学习保证书
2015/02/26 职场文书
2016年第32个教师节致辞
2015/11/26 职场文书
JPA 通过Specification如何实现复杂查询
2021/11/23 Java/Android
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技