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代码
Mar 01 Javascript
jQuery获取注册信息并提示实现代码
Apr 21 Javascript
jquery使用animate方法实现控制元素移动
Mar 27 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
js date 格式化
Feb 15 Javascript
JS获取字符对应的ASCII码实例
Sep 10 Javascript
微信小程序中post方法与get方法的封装
Sep 26 Javascript
浅谈vue路径优化之resolve
Oct 13 Javascript
JS 中可以提升幸福度的小技巧(可以识别更多另类写法)
Jul 28 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
vue实现带过渡效果的下拉菜单功能
Feb 19 Javascript
javascript设计模式 ? 解释器模式原理与用法实例分析
Apr 17 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在线代理转向代码
2012/05/05 PHP
PHP基本语法总结
2014/09/06 PHP
thinkPHP中create方法与令牌验证实例浅析
2015/12/08 PHP
php简单读取.vcf格式文件的方法示例
2017/09/02 PHP
Array对象方法参考
2006/10/03 Javascript
如何用javascript控制上传文件的大小
2006/10/26 Javascript
在Javascript中定义对象类别
2006/12/22 Javascript
分享精心挑选的12款优秀jQuery Ajax分页插件和教程
2012/08/09 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
JavaScript 验证码的实例代码(附效果图)
2013/03/22 Javascript
JavaScript数组Array对象增加和删除元素方法总结
2015/01/20 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
jQuery实现的表头固定效果实例【附完整demo源码下载】
2016/08/01 Javascript
JavaScript中数组slice和splice的对比小结
2016/09/22 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
微信小程序 石头剪刀布实例代码
2017/01/04 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
vue3.0中的双向数据绑定方法及优缺点
2019/08/01 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
Python中的choice()方法使用详解
2015/05/15 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
PyTorch中Tensor的数据统计示例
2020/02/17 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
个人授权委托书
2014/04/03 职场文书
高中信息技术教学反思
2016/02/16 职场文书
nginx配置ssl实现https的方法示例
2021/03/31 Servers
sass 常用备忘案例详解
2021/09/15 HTML / CSS
Html5同时支持多端sdk的小技巧
2021/11/17 HTML / CSS
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
使用Nginx+Tomcat实现负载均衡的全过程
2022/05/30 Servers