<!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. windows下ftp命令大全

    FTP Server: home4u.at.china.com User: yepanghuang Password: abc123 打开Windows的开始菜单,执行“运行”命令,在对话框中输入ft ...

  2. JS 基本语句

    1.循环中必备的条件: 初始值  循环条件  状态改变   循环体 for(初始值  循环条件  状态改变)    {       循环体     } for(var i=0;i<100;i++ ...

  3. mybatis延迟加载

    配置完成后可能会报错Cannot enable lazy loading because CGLIB is not available. Add CGLIB to your classpath 是由于 ...

  4. 【leetcode】Gray Code (middle)

    The gray code is a binary numeral system where two successive values differ in only one bit. Given a ...

  5. 【python】sqlite使用

    官方文档:https://docs.python.org/2/library/sqlite3.html sqlite教程:http://www.runoob.com/sqlite/sqlite-del ...

  6. JS调用自定义弹窗【bootstrap】

    function commonConfirm(msg,call){ showConfirmBox("消息提示",msg,call); } $(document).on('click ...

  7. Delphi 2010 Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl.

    "Can't load package C:\Programme\Afalinasoft\Add-in Express 2\d5units\adxwizardd5.bpl. Componen ...

  8. dropdownlist 动态添加

    this.DropDownList1.Items.Insert(0,new ListItem("",""));                this.Drop ...

  9. [Linux] linux awk命令详解

    reference : http://www.cnblogs.com/ggjucheng/archive/2013/01/13/2858470.html 简介 awk是一个强大的文本分析工具,相对于g ...

  10. springmvc中RedirectAttributes的作用

    RedirectAttributes在重定向的时候可以传参,不能跨站传参,因为参数是保存在服务器端