<!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. junit单元测试+junit与Spring结合

    配置:右键要加入单元测试的工程,选择properties,然后选择java build path,选择add library,选择junit即可. 编写:右键要测试的class,new一个junit ...

  2. js 函数分类2

    js 通用监听函数实现 // 把所有方法封装到一个对象里面,充分考虑兼容写法 var EventUtil = { // 添加DOM事件 addEvent: function(element, type ...

  3. JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft

    document.body.clientWidth 获取body元素对象的内容可视区域的宽度,即clientWidth=width+padding,不包括滚动条. document.body.clie ...

  4. python模块学习：Iterators和Generators

    转自:http://www.cnblogs.com/zhbzz2007/p/6102695.html 1 迭代器: 迭代器,允许你在一个容器上进行迭代的对象. python的迭代器主要是通过__ite ...

  5. 将win平台上的mysql数据复制到linux上报错Can't write; duplicate key in table

    将win平台上的mysql数据复制到linux上报错Can't write; duplicate key in table xxx 新年新气象,果然在新年的第一天就遇到了一个大坑,项目在win上跑的没 ...

  6. 转 IntelliJ IDEA 快捷键

    https://www.cnblogs.com/clwydjgs/p/9390488.html 一.视图查看 Ctrl+F12 查看file,method结构图.类继承机构图 (不知道方法结构,Ctr ...

  7. Java学习笔记（6）

    java是面向对象的语言. 对象:真实存在的唯一的事物. 类:实际就是对某种类型事物的共性属性与行为的抽取 面向对象的计算机语言的核心思想:找适合的对象做适合的事情. 如何找适合的对象呢: 1.sun ...

  8. 使用MR求解多个矩阵的乘积之后

    首先介绍涉及到的知识点,如下: 1)value的类型是IntArrayWritable,将整型数组值取出的方法有两种. a.其一,就是使用value的toArray()方法,返回值是一个Object ...

  9. Java高级架构师（一）第03节：多模块多Web应用合并War包

    多模块.多Web应用合并war包 在日常的系统开发中,如果担心各个系统的资源同名覆盖,可以在总的War模块下放置一份最终的资源. 将版本号改成9.1.0.v20131115,ok 在Idea中的Mav ...

  10. Scala高手实战****第20课：Scala提取器、注解深度实战详解及Spark源码鉴赏

    Spark中的源码的提取器和注解 @SparkContext.scala @ volatile 线程专用 保证线程间共享内容的一致性 @volatile private var _dagSchedul ...