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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
js this函数调用无需再次抓获id,name或标签名
Mar 03 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript实现完美拖拽效果
May 06 Javascript
分享两款带遮罩的jQuery弹出框
Dec 30 Javascript
详解Vue.js——60分钟组件快速入门(上篇)
Dec 05 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 Javascript
小程序实现带年月选取效果的日历
Jun 27 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
angular中子控制器向父控制器传值的实例
Oct 08 Javascript
通过JS深度判断两个对象字段相同
Jun 14 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程序员必须清楚的问题汇总
2014/12/18 PHP
php 使用array函数实现分页
2015/02/13 PHP
PHP在线调试执行的实现方法(附demo源码)
2016/04/28 PHP
Laravel-添加后台模板AdminLte的实现方法
2019/10/08 PHP
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
JS中prototype的用法实例分析
2015/03/19 Javascript
js正则匹配出所有图片及图片地址src的方法
2015/06/08 Javascript
javascript拖拽应用实例(二)
2016/03/25 Javascript
微信小程序-详解数据缓存
2016/11/24 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
JS二分查找算法详解
2017/11/01 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
使用watch在微信小程序中实现全局状态共享
2019/06/03 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
微信小程序页面间传递数组对象方法解析
2019/11/06 Javascript
JS forEach跳出循环2种实现方法
2020/06/24 Javascript
解决vue刷新页面以后丢失store的数据问题
2020/08/11 Javascript
[00:31]2016完美“圣”典风云人物:国士无双宣传片
2016/12/04 DOTA
Python 检查数组元素是否存在类似PHP isset()方法
2014/10/14 Python
Python实现高斯函数的三维显示方法
2018/12/29 Python
详解Python字符串切片
2019/05/20 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
python的help函数如何使用
2020/06/11 Python
迪卡侬印尼体育用品商店:Decathlon印尼
2020/03/11 全球购物
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
优秀本科生求职推荐信
2014/02/24 职场文书
计算机网络专业自荐信
2014/07/04 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
婚前财产协议书范本
2014/10/19 职场文书
年会邀请函范文
2015/01/30 职场文书
2016年元旦寄语
2015/08/17 职场文书
村官2015年度工作总结
2015/10/14 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
搭建Yolov5服务器
2022/04/30 Servers