[1].[代码] [HTML]代码 跳至 [1]

<!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上传并且预览图片

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  3. 富文本编辑器handyeditor，上传和预览图片的host地址不一样

    使用富文本编辑器(官网)时,大多时候都会用到图片上传,但是下载的富文本编辑器的默认配置是只有一个上传地址的host的. var he = HE.getEditor('editor', { autoHe ...

  4. 原生JS上传,实现预览并且兼容大部分IE

    // 前提条件: ie浏览器模式下,用户要允许ie默认的加载项:以下兼容ie的方法才会生效 // 图片上传预览 IE是用了滤镜 function previewImage(file) { var MA ...

  5. js 上传文件预览

    1. FILE API html5提供了FIle和FileReader两个方法,可以读取文件信息并读取文件. 2. example <html> <body> <div ...

  6. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  7. HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该file的url,一个空的img标签,ID为img0,把选择 ...

  8. js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌

    <head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...

  9. JS兼容各个浏览器的本地图片上传即时预览效果

    JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...

随机推荐

  1. Currency Exchange（Bellman-ford)

    Currency Exchange Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 21349   Accepted: 765 ...

  2. git pull --rebase

    git reset --hard orgin/master $ git push bit 1.8-subchannels To git@bitbucket.org:cms.git ! [rejecte ...

  3. KMP算法精髓

    这个算法的做法就是在部分匹配的时候,常规想法是向后移动一位,但是KMP想法是向后移动n位(n=m-L). 注释:这里m表示已经匹配了的字符的个数,L表示已经匹配了的那些字符组成的这个字符串的前缀和后缀 ...

  4. WinAPI: ExtCreateRegion - 区域变换

    转载:http://www.cnblogs.com/del/archive/2008/06/03/1212534.html 相似函数: SetWorldTransform 本例效果图: 代码文件: u ...

  5. Linux系统管理员面试50题

    命令nslookup是做什么的? Nslookup 是一个 监测网络中 DNS 服务器是否能正确实现域名解析的命令行工具. 你如何把CPU占用率最高的进程显示出来? top -c 按照cpu排序 如果 ...

  6. [ruby on rails] 跟我学之(8)修改数据

    修改views 修改index视图(app/views/posts/index.html.erb),添加编辑链接,如下: <h1>Our blogs</h1> <% @p ...

  7. MySQL查询测试经验

    测试表geoinfo,整个表超过1100万行,表结构: CREATE TABLE `geoinfo` ( `objectid` ) NOT NULL AUTO_INCREMENT , `latitud ...

  8. Linux下 ntp 时间同步服务ntpd 出现 the NTP socket is in use, exiting 解决

    [root@EPDDB log]# [root@EPDDB log]# ntpdate 10.154.8.200 6 Sep 09:35:09 ntpdate[30210]: the NTP sock ...

  9. django LDAP

    > http://goodosoft.github.io/2015/02/25/Using-AD-as-authentication-for-Django/ > http://my.osc ...

  10. jstl数字转日期

    <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %> <jsp: ...