<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
 
 
<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>

js实现上传图片及时预览的更多相关文章

  1. js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小

    方法一: js: /**     * 上传图片本地预览方法     * @param {Object} fileObj 上传文件file的id元素  fresh-fileToUpload      * ...

  2. js：上传图片并预览（https://blog.csdn.net/weixin_38023551/article/details/78318532）

    1: //filereader 的方法<form action="" enctype="multipart/form-data"> <inpu ...

  3. js上传图片及预览功能

    详细内容请点击 参考了网上一些人代码写了一个上传图片及时预览的功能 <img id="imgTag" style="height: 100px;" alt ...

  4. 兼容好的JS图片上传预览代码

    转 : http://www.codefans.net/articles/1395.shtml 兼容好的JS图片上传预览代码 (谷歌,IE11) <html xmlns="http:/ ...

  5. jquery解决file上传图片+图片预览

    js解决file上传图片+图片预览 demo案例中代码为js原生控制,可以根据项目的需求修改为jquery操作 <!DOCTYPE html><html lang="en& ...

  6. vue <input type="file">上传图片、预览、删除

    使用原生<input type="file">上传图片.预览.删除:multiple实现可上传多张 参数名 类型 说明 fileTypes Array 文件类型, 默认 ...

  7. JS实现的图片预览功能

    之前的博文有实现过图片上传预览,但那种方法是预览时就将图片上传,会产生很大的浪费空间.找到了之前有人写的用JS实现的图片预览,就说用js将上传的图片显示,上传代码在之前的博文中有写到. 以下是实现的代 ...

  8. 使用pdf.js在移动端预览pdf文档

    pdf.js 是一个技术原型主要用于在 HTML5 平台上展示 PDF 文档,无需任何本地技术支持. 在线演示地址:http://mozilla.github.com/pdf.js/web/viewe ...

  9. html上传图片的预览功能实现

    表单代码(仅取上传文件部分): <input class="selectImg" style="position:absolute;opacity: 0;width ...

随机推荐

  1. UVALive 6577 Binary Tree 二叉树的LRU串

    今天继续攒人品...真开心啊O(∩_∩)O~~各种身体不舒服~~ https://icpcarchive.ecs.baylor.edu/external/65/6577.pdf 题意是这样的,现在有一 ...

  2. linux下mysql开启关和重启

    开启: /etc/init.d/mysql start关闭: /etc/init.d/mysql stop重启: /etc/init.d/mysql restart 查看字符集show variabl ...

  3. andriod一次退出所有的Activity

    自己实现了一个Activity管理,可以实现一次退出所有的Activity.在Activity启动的时候,将调用里面的put方法,将Activity对象加入进来.在要退出某个activity的时候,将 ...

  4. js中Number对象与MATH方法整理总结

    W3C的文档: Number 对象属性 属性 描述 constructor 返回对创建此对象的 Number 函数的引用. MAX_VALUE 可表示的最大的数. MIN_VALUE 可表示的最小的数 ...

  5. Mysql源码分析--csv存储引擎

    一直想分析下mysql的源码,开始的时候不知道从哪下手,先从csv的文件存储开始吧,这个还是比较简单的.我是用的是mysql5.7.16版本的源码. csv源码文件在mysql源码的mysql-5.7 ...

  6. 合唱队形2（洛谷U5874）

    题目背景 上次老师挑出来的(N-K)位同学很不高兴,于是他们准备自己组建合唱队形.他们请了kkk来帮忙. 题目描述 他们安排了一个动作--手拉着手唱一首歌(就是他们围成一个圈).如果有两个相邻的同学的 ...

  7. Swift - 键盘弹出样式

    Swift提供了11种键盘类型: 在开发中,我们可以根据不同的需求,选择不同的键盘样式,例如,当我们只需要输入手机号码时,可以选择纯数字类型的键盘(.NumbersAndPunctuation),当我 ...

  8. NYOJ之奇偶数分离

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAscAAAJ8CAIAAACdmZvPAAAgAElEQVR4nO3dPVLjStsG4G8T5CyEFC

  9. hadoop+javaWeb的开发中遇到包冲突问题(java.lang.VerifyError)

    1.HDFS + WEB 项目 报java.lang.VerifyError... 异常 抛异常: Exception in thread "main" java.lang.Ver ...

  10. 两个viewport的故事（第一部分）

    原文:http://www.quirksmode.org/mobile/viewports.html 在这个迷你系列的文章里边我将会解释viewport,以及许多重要元素的宽度是如何工作的,比如< ...