<!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. 3个js函数 变成数组本身的3个方法

    <!DOCTYPE html> 3个js函数 变成数组本身的3个方法 /** * 稀疏数组 变成不稀疏数组 * @params array arr 稀疏数组 * @return arry ...

  2. Python实现图片转字符画

    from PIL import Image def get_char(r, g, b, alpha=256): ascii_char = '''$@B%8&WM#*oahkbdpqwmZO0Q ...

  3. Selenium2+python自动化27-查看selenium API【转载】

    前言 前面都是点点滴滴的介绍selenium的一些api使用方法,那么selenium的api到底有多少呢?本篇就叫大家如何去查看selenium api,不求人,无需伸手找人要,在自己电脑就有. p ...

  4. Selenium2+python自动化25-js处理日历控件（修改readonly属性）【转载】

    前言 日历控件是web网站上经常会遇到的一个场景,有些输入框是可以直接输入日期的,有些不能,以我们经常抢票的12306网站为例,详细讲解如何解决日历控件为readonly属性的问题. 基本思路:先用j ...

  5. KVM(七)使用 libvirt 做 QEMU/KVM 快照和 Nova 实例的快照

    本文将梳理 QEMU/KVM 快照相关的知识,以及在 OpenStack Nova 中使用 libvirt 来对 QEMU/KVM 虚机做快照的过程. 1. QEMU/KVM 快照 1.1 概念 QE ...

  6. AC日记——Magazine Ad codeforces 803d

    803D - Magazine Ad 思路: 二分答案+贪心: 代码: #include <cstdio> #include <cstring> #include <io ...

  7. 如何修改wamp目录【成功】

    Wampserver安装好后,“www目录”默认为X:/wamp/www,(这里的X是盘符)也就是wampserver安装目录下的www文件夹.实际使用中,默认设置往往不是我们想要的,可能改成其他文件 ...

  8. (2)Python 变量和运算符

    一.python变量特点 python是弱类型语言,无需声明变量可以直接使用并且变量的数据类型可以动态改变 二.变量命名规则 1.不能使用python关键字 2.不能数字开头 3.不能包含空格 4.不 ...

  9. Opencv利用Mat访问像素值

    如果是采用Mat形式存储,想要访问灰度图像的灰度值,可以采用如下方法: 如果是彩色图像,采用如下方法: 说明: 其中gray_value中存放灰度值,image是读入的图像,i表示行,j表示列: co ...

  10. 51nod 1129 字符串最大值

    首先我们可以想到的是,既然求的是前缀的长度,就意味着一定是从1开始的,那么我们可以直接用下 标表示每一个前缀.但是可能存在几个前缀互相包含的情况,比如:abababa我们可以看见的是aba中包含着ab ...