文档章节

图片上传点击浏览可以预览图片

leona_lily
 leona_lily
发布于 2015/04/10 16:34
字数 295
阅读 57
收藏 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 content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Js实现图片上传前在本地预览</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.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>

© 著作权归作者所有

共有 人打赏支持
leona_lily
粉丝 9
博文 99
码字总数 43341
作品 0
朝阳
程序员
私信 提问
blackfox/ajaxUpload

AjaxUpload @author:yangjian102621@gmail.com 插件描述: javascript异步上传插件,包含3个子项目BUpload, JUpload, TUpload. BUpload : 基于HTML5, UI仿百度编辑器的图片上传, 支持图片上...

blackfox
2016/06/05
0
0
KindEditor3.4.4版的ASP.NET版本

虽说这个版本下载的源码中是自带有ASP.NET版本的,但很多人下了不会用的,自己刚刚也下载了那个版本看了一下里面的ASP.NET的上传代码,写得真的蛮变态的,虽然是看不懂那个LitJSON是什么东西...

niunan
2010/06/11
0
0
js 选择图片并预览、上传

用火狐、谷歌调试图片的预览和上传可谓是怎么弄怎么行,只要你说出需求,可是到了IE下,就出现了各种各样的问题,但是不管你遇到什么样的问题,总会有解决的办法,尽管有时候办法可能会笨拙 ...

终日乾乾
2016/01/15
56
0
CoderKo1o/PYPhotosView

PYPhotoBrowser An easy way to browse photo(image) for iOS. iOS 中使用简单的图片浏览器。 Contents Getting Started Renderings【效果图】 Who is using PYPhotoBrowser【哪些app使用PYP......

CoderKo1o
2016/11/14
0
0
WebUploader的缩略图如何在后台保存以及下次打开页面时如何展示的问题

大家好,我的使用场景如下:(我觉得比较通用) 用户在需要专家帮忙的时候需要填写文字信息以及上传图片 可上传多图,每选择一个图片无需点击“上传”按钮而自动上传 上传成功后,出现缩略图...

错觉
2015/12/09
9.2K
6

没有更多内容

加载失败,请刷新页面

加载更多

初探Spring Cloud(一)

1. 什么是Spring Cloud? Spring提供了一系列工具,可以帮助开发人员迅速搭建分布式系统中的公共组件(比如:配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,...

__HuWei
11分钟前
0
0
Mac配置ssh免密钥登录

Mac终端每次使用ssh -p 22 user@ip登录很是麻烦,下面介绍配置ssh免密钥登录: cd ~/.ssh下创建conf文件,写入以下配置: Host test HostName ip Port 22 IdentityFile /Users/t/key/test.p...

littlemesieV
26分钟前
1
0
Spark2.0操作ES

ES提供了支持包来方便的操作ES。首先添加ES的依赖maven: <dependency> <groupId>org.elasticsearch</groupId> <artifactId>elasticsearch-spark-20_2.11</artifactId> <version>6.2.0</ver......

守望者之父
28分钟前
1
0
专业术语

1、防御性编程 DruidDataSource类有一个init方法,我们在spring中配置druid时,都会指定 init-method='init'. 而且DruidDataSource也在其他地方,诸如getConnection()方法里作了防御性编程, 也就...

still5656
30分钟前
1
0
微信开发--测试账号相关

1、微信公众平台选择代码开发后,其平台上的部分功能会不可用 可在开发者工具中选择开通测试账号,进行相关的功能调试(测试账号出微信支付不可调试外,其他功能基本上都可以调试) 2、测试账号...

Code辉
36分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部