<!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. 【bzoj3261】最大异或和

    就是一个可持久化Trie....... #include<bits/stdc++.h> #define N 600005 using namespace std; inline int r ...

  2. Winform 中panel的mousewheel鼠标滚轮事件触发

    如果将窗体或容器控件(如Panel控件)的AutoScroll属性设置为True时,那么当窗体或Panel容不下其中的子控件时就会出现 滚动条,通过移动滚动条可以上下显示出窗体或Panel中的全部内容 ...

  3. 【 Linux 】三大主流软件负载均衡器对比(LVS、Nginx、HAproxy)

    三大主流软件负载均衡器对比(LVS.Nginx.HAproxy) (资料来自网络,做了部分的补充说明) LVS:    1. 抗负载能力强,性能高,能达到F5的60%,对内存和CPU资源消耗比较低   ...

  4. discuz自定义生成单页面

    在pc端,若要生成一个单页面,有一个比较方便的方法是生成新的专题页,然后diy其中的内容. 不过这种做法有两个缺点 1 url太过冗赘 2 只有一个插入url代码功能,没有文本编辑功能 而且文本框小的 ...

  5. 服务端指南 数据存储篇 | 聊聊 Redis 使用场景（转）

    作者:梁桂钊 本文,是升级版,补充部分实战案例.梳理几个场景下利用 Redis 的特性可以大大提高效率. 随着数据量的增长,MySQL 已经满足不了大型互联网类应用的需求.因此,Redis 基于内存存 ...

  6. [BZOJ3585]mex 主席树

    3585: mex Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1252  Solved: 639[Submit][Status][Discuss] ...

  7. luogu P1038借教室【Noip提高组2012】

    这道题我读完题目的第一感觉是: 这不就是个线段树??用线段树维护区间最小值,检查是否满足订单要求即可判断. 对于修改操作直接在区间上进行. 据说会卡一卡线段树,但是貌似写一个懒标记,连zkw线段树都不 ...

  8. NOIP2014飞扬的小鸟

    长为n,高为m的二维平面,其中有k个管道(忽略管道的宽度)小鸟始终在游戏界面内移动.从最左边任意高度位置出发,到达游戏界面最右边,游戏完成每个单位时间沿横坐标方向右移距离为1,竖直移动的距离由玩家控制 ...

  9. 对mysql数据库表的相关操作

    虫师博客(Python使用MySQL数据库(新)): https://www.cnblogs.com/fnng/p/3565912.html 1.更改表的结构,增加一个字段放置新增的属性 alter ...

  10. BZOJ 1878 [SDOI2009]HH的项链（扫描线+树状数组）

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1878 [题目大意] 给出一个数列,给出m个查询,每次查询一个区间中不相同的数字个数 [ ...