<!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'+file.id);
if (file.files && file.files[0])
{
var imgid = 'imghead'+file.id;
div.innerHTML ='<img id='+imgid+ '>';
var img = document.getElementById(imgid );
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='+imgid+ '>';
// div.innerHTML = '<img id=imghead>';
var img = document.getElementById('imghead'+file.id);
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="+imgid+" 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="previewfile01" class='preview'></div>
<input type="file" id='file01' onchange="previewImage(this)" />
<div id="previewfile02" class='preview'></div>
<input type="file" id='file02' onchange="previewImage(this)" />
<div id="previewfile03" class='preview'></div>
<input type="file" id='file03' onchange="previewImage(this)" />
</body>
</html>

js图片预览代码的更多相关文章

  1. js本地图片预览代码兼容所有浏览器

    html代码 <div id="divPreview" style="width: 160px; height: 170px"><img id ...

  2. js图片预览插件，不涉及上传

    小小的几十行代码,很牛逼,很实用. 支持多个图片的预览,只要new多个对象就行了. html如下 <!-- zhouxiang www.zhou-xiang.com --> <!DO ...

  3. previewImage.js图片预览缩放保存插件

    previewImage.js好用的图片预览缩放保存插件

  4. vue.js 图片预览

    Vue.js的图片预览的插件还是不少,但是找了半天还是没找到跟现在项目里能用得很顺手的,其实项目里图片预览功能很简单,点击放大,能双指缩放就可以了.部分vue.js的图片预览库都需要把图片资源单独拿出 ...

  5. js图片预览带进度条

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. js 图片预览

    图片预览 $('#pac_recipe').change(function() { var imgsrc = ''; ]) { //chrome firefox imgsrc = window.URL ...

  7. Vue.js图片预览插件

    vue-picture-preview-extend vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:https://segmentfault. ...

  8. js图片预览（一张图片预览）

    核心思想:无论是一张图片上传还是多图上传,首先我们都需要先获得图片对象. 栗子: <inuput type="file" id="myfile" onch ...

  9. Viewer.js 图片预览插件使用

    一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件 支持响应式 支持放大/缩小 支持旋转(类似微博的图片旋转) 支持水平/垂直翻转 支持图片 ...

随机推荐

  1. 使用 jQuery对象设置页面中 ＜ul＞ 元素的标记类型，并使用 DOM 对象设置 ＜li＞ 元素的浮动属性和右边距。使用jQuery 对象和 DOM 对象设置页面元素属性

    查看本章节 查看作业目录 需求说明: 使用 jQuery对象设置页面中 <ul> 元素的标记类型,并使用 DOM 对象设置 <li> 元素的浮动属性和右边距.使用jQuery ...

  2. Ranger-Sqoop2插件安装

    Ranger-Sqoop2插件安装,基于Ranger版本1.0.0,支持Sqoop2版本1.99.7. 1.获取安装包 scp root@10.43.159.11:/home/compile/rang ...

  3. 《Python核心编程第3版中文版》（高清）.PDF，免费无需任何解压密码

    链接:https://pan.baidu.com/s/18d3xinNX1oH5q8zpB10ABA 提取码:dx7h

  4. python 自动化测试框架unittest与pytest的区别

    前言: 有使用过unittest单元测试框架,再使用pytest单元测试框架,就可以明显感觉到pytest比unittest真的简洁.方便很多. unittest与pytest的区别: 主要从用例编写 ...

  5. slf4j+logback日志框架 的具体使用操作【spring boot自带的默认日志框架】

    1.前言 是不是还在使用System.out.println()打印数据到控制台看? 东西少还好,如果多起来,那就看的很烦人了,特别还有加时间等信息. 怎么解决? 可以使用日志框架 ,常见的有 log ...

  6. 苹果系统 的 qq浏览器 和 qq内置浏览器 无法使用 websocket 的 妥协方案

    没错,就是用不了,js脚本不执行,更别说服务器运行 onopen函数了!!! 怎么办...搞了一天,仍然找不到连接的方法!!! 幸运的是仅仅苹果系统 的无法使用 ,安卓的却可以,奇了怪了 哈皮 ,那我 ...

  7. 微服务架构攀登之路（五）之Go-micro入门

    一.go-micro入门 1. go-micro 简介 Go Micro 是一个插件化的基础框架,基于此可以构建微服务,Micro 的设计哲学是可插拔的插件化架构 在架构之外,它默认实现了 consu ...

  8. JSP页面中最常使用的脚本元素

    注:图片如果损坏,点击文章链接:https://www.toutiao.com/i6513082449755374093/ 前面简单说了一个<JSP页面实际上就是Servlet>,接下来说 ...

  9. Jupyter常用配置

    一  安装 pip install --upgrade jupyterthemes 二 设置主题 #查看主题列表 jt -l #设置主题并打开工具栏 jt -t chesterish -T 三 设置列 ...

  10. func-spring-boot-starter 快速上手

    func-spring-boot-starter test 项目地址 func-spring-boot-starter项目地址: https://gitee.com/yiur/func-spring- ...