<!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. 替代联阳IT6564方案|CS5262替代IT6564|设计DP转HDMI+VGA扩展坞方案

    联阳IT6564:带嵌入式MCU的单芯片4通道DisplayPort1.2到HDMI2.0/VGA转换器 联阳IT6564是一种高性能的单芯片显示端口到HDMI和VGA转换器.IT6564FN结合Di ...

  2. 基于Spring MVC + Spring + MyBatis的【学生管理管理系统】

    资源下载:https://download.csdn.net/download/weixin_44893902/45602690 练习点设计:模糊查询.删除.新增 一.语言和环境 实现语言:JAVA语 ...

  3. Java Web项目 慧心人力资源管理系统

    题目:慧心人力资源管理系统 文档下载:https://download.csdn.net/download/weixin_44893902/16336711 完整项目下载:https://downlo ...

  4. docker学习：docker---kafka安装

    下载zookeeper镜像与kafka镜像: docker pull wurstmeister/zookeeper docker pull wurstmeister/kafka 本地启动zookeep ...

  5. python pip 第三方包高速下载--换源

    更换pip镜像源 使用前注意HTTP(S) !!!!!!!!!! 官方镜像源 https://pypi.python.org/simple/ https://pypi.tuna.tsinghua.ed ...

  6. Swoole 中协程的使用注意事项及协程中的异常捕获

    协程使用注意事项 协程内部禁止使用全局变量,以免发生数据错乱: 协程使用 use 关键字引入外部变量到当前作用域禁止使用引用,以免发生数据错乱: 不能使用类静态变量 Class::$array / 全 ...

  7. html基础 表单标签 input系列 以及优化方法

    场景:在网页中显示手机用户信息的表单效果. 如:登录页.注册页标签名:input 用法是通过改变type属性值,来展示不同效果 1.1 html 代码 <!--placeholder 提示符又叫 ...

  8. idea 创建 springboot 模块报错-解决

    1.报错截图 2.解决 把 https://start.spring.io  换成  阿里镜像的即可 https://start.aliyun.com/

  9. C语言 生成一个随机数

    随机数的生成 有缺陷的生成方式 生成随机数可以使用 <stdlib.h> 里的 int rand(void); 函数实现! 注释: C语言中还有一个 random() 函数可以获取随机数, ...

  10. JAVA之内存结构

    概述 JAVA是我们现在最常用的开发语言,而他的垃圾回收机制(Garbage Collection)的重要作用不言而喻,以下简称GC,所以了解GC至关重要,现本人对于GC机制以前的理解和现在的理解记录 ...