<!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回显单选框,但是明明从页面效果上来看,单选框已经被选中了,可是却不能触发单选框的change事件,取值的时候用某种方法取 ...

  2. 使用Dropzone上传图片及回显演示样例

    一.图片上传所涉及到的问题 1.HTML页面中引入这么一段代码 <div class="row"> <div class="col-md-12" ...

  3. springboot 上传图片与回显

    在网上找了很多例子,不能完全契合自己的需求,自行整理了下.需求是这样的:项目小,所以不需要单独的图片服务器,图片保存在服务器中任意的地方,并且可以通过访问服务器来获取图片.话不多说上代码: 1.依赖 ...

  4. Ajax简单异步上传图片并回显

    前台代码 上传图片按钮 <a href="javascript:void(0)" onclick="uploadPhoto()">选择图片</ ...

  5. Element upload组件上传图片与回显图片

    场景:新增商品时需要添加商品主图,新增成功之后可编辑 上传图片: <el-form-item label="专区logo:" style="height:160px ...

  6. js select 默认回显判断

    <select id="dataselect" class="input-medium" style="width: 20%"> ...

  7. checkbox数据回显问题

    一.问题 在用复选框的时候,最常用的无非就是全选,全不选,数据回显等问题!要做的比较灵活!最近做项目的时候,就遇到这些问题,下面从js和JQueyr两方面解决一下全选,全不选,数据回显的问题. 二.H ...

  8. 淘淘商城学习笔记 之 上传图片到远程服务器，图片的回显出现的bug

    最近在学习淘淘商城中用到的技术,感觉受益良多,遇到一个比较奇怪的bug调了好久,遂心乐之分享于诸君 bug情况是这样的:在商城的后台上传图片之后图片回显不出来,右键查看链接,发现链接被加了localh ...

  9. Node.js IO处理输入和回显，以及当今web应用程序的发展史

    1.关于Node.js IO处理输入和回显 在Windows终端或者CD中输入   echo  'I must learn about Node.js' 结果将刚刚输入的   echo  'I mus ...

随机推荐

  1. 使用pandas进行数据清洗

    本文转载自:蓝鲸的网站分析笔记 原文链接:使用python进行数据清洗 目录: 数据表中的重复值 duplicated() drop_duplicated() 数据表中的空值/缺失值 isnull() ...

  2. 快速搭建YUM源和yum使用

    yum是一种便捷,快速的RPM包安装方法,可以避免很多包的关联性,但RedHat的YUM源,不是免费的,需要他们的RHN才能够用,而CentOS得yum是免费的,由于CentOS和RedHat相似度高 ...

  3. django定义模型类

    模型类被定义在应用文件夹下的model.py中 模型类必须继承Django的models.Model类 属性名不能用连续的两条下划线__ 主键:primary key,简写 pk 不需要主动定义,dj ...

  4. SFTP获取数据文件

    使用SFTP:客户端从服务端获取数据文件 客户机: 用户:client IP:13.00.00.11 服务端: 用户:server IP:16.00.00.66 1.在客户端的根目录下,执行下面的命令 ...

  5. Laravel查询技巧

    1.同时增加几个字段的数量 DB::table('project') ->where('id',$yewuid) ->increment('count', 1, [ 'click'=> ...

  6. .NET Core Runtime ARM32 builds now available

    原文地址:传送门 .NET Core Runtime ARM32 builds now available The .NET Core team is now producing ARM32 buil ...

  7. 最近项目中用到的js

    1.用字典判断数组是否有重复function ticketTypeValidate() { var ticketArr = []; var tickettype = $("div[name= ...

  8. django 项目使用setting文件里定义的变量方法

    1.在Django项目的settings文件里定义里变量 REDIS_CONN = { 'HOST':'127.0.0.1', 'PORT':6379, 'DB':0,} 2.函数需要使用settin ...

  9. 11、Flask实战第11天：蓝图

    蓝图的基本使用 之前我们写的代码都是集中在一个主程序文件里面.这样不利于分层解耦和维护.蓝图的作用就是让我们的flask项目更加模块化结构更加清晰,可以将相同模块的视图函数放在同一个蓝图下,同一个文件 ...

  10. 02、Mecanim之IK动画

    序言:IK动画全名是Inverse Kinematics 意思是逆向动力学,就是子骨骼节点带动父骨骼节点运动. 比如体操运动员,只靠手来带动身体各个部位的移动.手就是子骨骼,身体就是它的父骨骼,这时运 ...