<!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. CS5265替代LT8711设计TYPEC转HDMI 4K高清投屏方案|LT8711龙迅替代方案

    龙迅LT8711是一款Type-C/DP1.2 to HDMI2.0方案芯片.LT8711HE是一款高性能Type-C/DP1.2至HDMI2.0转换器,设计用于将USB typec或DP1.2源连接 ...

  2. exit hook

    之前经常改 malloc_hook , realloc_hook,free_hook 为 one_gadget 来 get shell ,最近看到一种利用是改 exit hook(winmt师傅告诉我 ...

  3. linux(CentOS7) 之 MySQL 5.7.30 下载及安装

    一.下载 1.百度搜索mysql,进入官网(或直接进入官网https://www.mysql.com) 2.选择 downloads 3.翻到最下面,选择MySQL Community (GPL) D ...

  4. Selenium_获取元素文本、属性值、尺寸（8）

    from selenium import webdriver driver = webdriver.Chrome() driver.maximize_window() driver.get(" ...

  5. JS中void(0)操作符的使用

    今天 在看源码时,发现这种写法 if(value === void(0)){ // } 以前没有见过这种写法,感觉就是判断一个变量是否有值,官网上是这样说的: void运算符 对给定的表达式进行求值, ...

  6. Windows系统上搭建Clickhouse开发环境

    Windows系统上搭建Clickhouse开发环境 总体思路 微软的开发IDE是很棒的,有两种:Visual Studio 和 VS Code,一个重量级,一个轻量级.近年来VS Code越来越受欢 ...

  7. vue中使用window.resize并去抖动优化

    this.clientWidth = document.documentElement.clientWidth window.onresize = () => { this.clientWidt ...

  8. js对象数组多字段排序

    来源:js对象数组按照多个字段进行排序 一.数组排序 Array.sort()方法可以传入一个函数作为参数,然后依据该函数的逻辑,进行数组的排序. 一般用法:(数组元素从小大进行排序) var a = ...

  9. python 读取配置文件ini ---ConfigParser

    Python读取ini文件需要用到 ConfigParser 模块 关于ConfigParser模块的介绍详情请参照官网解释:https://docs.python.org/2.7/library/c ...

  10. Bootstrap实战 - 响应式布局

    一.介绍 响应式布局就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的. 导航栏与轮播在大部分网站的头部占很高的比重,特别是导航栏,扮演着网站地图的 ...