<!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. JDK HttpClient 单次请求的生命周期

    HttpClient 单次请求的生命周期 目录 HttpClient 单次请求的生命周期 1. 简述 2. uml图 3. Http连接的建立.复用和降级 3.1 调用流程及连接的建立和复用 3.2 ...

  2. 图像数据到网格数据-2——改进的SMC算法的实现

    概要 本篇接上一篇继续介绍网格生成算法,同时不少内容继承自上篇.上篇介绍了经典的三维图像网格生成算法MarchingCubes,并且基于其思想和三角形表实现了对样例数据的网格构建.本篇继续探讨网格生成 ...

  3. 基于GO语言实现的支持高并发订单号生成函数

    1.固定24位长度订单号,毫秒+进程id+序号. 2.同一毫秒内只要不超过一万次并发,则订单号不会重复. github地址:https://github.com/w3liu/go-common/blo ...

  4. Ubuntu18.04升级内核后修改grub文件启动顺序

    采坑:之前线上的服务器内核是4.15.0,后面有的服务跑不起来,说是要升级内核,于是就升级了,然后改了/etc/default/grub的启动顺序,改错了就启动不起来了,哈哈.后面多次尝试还是改成功了 ...

  5. 细谈 == 和 equals 的具体区别 【包括equals源码分析】

    1.前言 昨天舍友去面试,被面试官的问题难住了:俩个学生类除了学生姓名不同用.equal来比较. 我是一脸懵逼的 ,问题说的很模糊 , 理解字面意思为 :一个 实体类名叫Student ,内部属性有学 ...

  6. hal 编码器做用户输入时捕获初值的设置

    uint16_t encoderDirection = __HAL_TIM_IS_TIM_COUNTING_DOWN(&htim3); uint16_t encoderValue = __HA ...

  7. MASA Framework - 整体设计思路

    源起 年初我们在找一款框架,希望它有如下几个特点: 学习成本低 只需要学.Net每年主推的技术栈和业务特性必须支持的中间件,给开发同学减负,只需要专注业务就好 个人见解:一款好用的框架应该是补充,而不 ...

  8. Python常用的数据结构

    一.list 列表 1.列表的特点 有序的,元素可以重复,列表中的元素可以进行增上改查,可以存放不同的数据类型 2.创建列表 中括号创建并填充 --->[] 通过构造函数创建 list() 列表 ...

  9. 学习AJAX必知必会（4）~同源策略、解决跨域问题（JSONP、CORS）

    一.同源策略(Same-Origin Policy),是浏览器的一种安全策略. 1.同源(即url相同):协议.域名.端口号 必须完全相同.(请求是来自同一个服务) 2.跨域:违背了同源策略,即跨域. ...

  10. Go 变量及基本数据类型2

    #### Go 变量及基本数据类型(二)今天学习一下基本数据类型,包括整数类型,小数类型,字符类型##### 整数类型用来存放整数数值的, 如0,1,-10,2222等; 整数型的类型有: 类型 有无 ...