<!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. Effective C++ -----条款33：避免遮掩继承而来的名称

    derived classes内的名称会遮掩base classes内的名称.在public继承下从来没有人希望如此. 为了让被遮掩的名称再见天日,可使用using声明式或转交函数(forwardin ...

  2. Bestcoder13 1003.Find Sequence（hdu 5064） 解题报告

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5064 题目意思:给出n个数:a1, a2, ..., an,然后需要从中找出一个最长的序列 b1, b ...

  3. 【linux】ubuntu stmp服务器配置

    来源:http://blog.itpub.net/786540/viewspace-1002077/ sudo apt-get install sendmail(其中已经包含了sendmail-bin ...

  4. php继承、多态

    继承: 概念:子类可以继承父类的一切 特点:单继承:一个子类只能有一个父类,一个父类可以派生出多个子类 方法重写:在子类里面对父类的方法进行重写. 重写:override 重载,编译多态:overlo ...

  5. September 3rd 2016 Week 36th Saturday

    Calculation never made a hero. 举棋不定,难以称雄. We change. We have to. Or we spend the rest of our lives f ...

  6. UbuntuLinux安装Mysql

    1.安装Mysql5.7 方法:手动安装5.7 One:     $ wget http://dev.mysql.com/get/mysql-apt-config_0.6.0-1_all.deb 下载 ...

  7. [Android]在代码混淆中关闭 Log

    -assumenosideeffects class android.util.Log{ public static *** d(...); public static *** e(...); }

  8. C++ STL string

    要想使用标准C++中string类,必须要包含 #include <string>// 注意是<string>,不是<string.h>,带.h的是C语言中的头文件 ...

  9. JAVA作业）01

    一,四则运算 (一)  设计思想 使用Scanner类读取运行时用户输入数据,然后进行数据类型转换,完成四则运算之后利用输出类输出. (二)  流程图 (三)程序代码 //Zhangxiaochen ...

  10. wifi display代码 分析

    转自:http://blog.csdn.net/lilian0118/article/details/23168531 这一章中我们来看Wifi Display连接过程的建立,包含P2P的部分和RTS ...