js实现图片上传本地预览
演示地址:https://xibushijie.github.io/static/uploadImg.html
<!DOCTYPE>
<html> <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=auto border=0 src='a1.png'>
</div>
<input type="file" onchange="previewImage(this)" />
</body> </html>
js实现图片上传本地预览的更多相关文章
- 图片上传本地预览。兼容IE7+
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 预览地址:http://www.jinbanmen.com/test/1.html js代码:/**名称 ...
- JQuery插件:图片上传本地预览插件,改进案例一则。
/* *名称:图片上传本地预览插件 v1.1 *作者:周祥 *时间:2013年11月26日 *介绍:基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari *插 ...
- js实现图片上传及预览---------------------->>兼容ie6-8 火狐以及谷歌
<head runat="server"> <title>图片上传及预览(兼容ie6/7/8 firefox/chrome)</title> & ...
- 基于jquery实现图片上传本地预览功能
一.原理 分为两步: 当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL),把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来.在这里,我们需 ...
- jquery 图片上传本地预览V1.2
基于JQUERY扩展,图片上传预览插件 目前兼容浏览器(IE 谷歌 火狐) 不支持safari 代码进行小小的压缩 如果看源码 自己解压就行了 版本已升级 修复jquery版本问题 支持任意jqu ...
- HTML5图片上传本地预览
在开发 H5 应用的时候碰到一个问题,应用只需要一张小的缩略图,而用户用手机上传的确是一张大图,手机摄像机拍的图片好几 M,这可要浪费很多流量. 我们可以通过以下方式来解决. 获取图片 通过 File ...
- 原生JS实现图片上传并预览功能
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JS兼容各个浏览器的本地图片上传即时预览效果
JS兼容各个浏览器的本地图片上传即时预览效果 很早以前 在工作曾经碰到这么一个需求,当时也是纠结了很久,也是google了很久,没有碰到合适的demo,今天特意研究了下这方面的的问题,所以也就做了个简 ...
- jQuery:[1]实现图片上传并预览
jQuery:[1]实现图片上传并预览 原理 预览思路 1.当上传对象的input被触发并选择本地图片之后获取要上传的图片对象的URL: 2.把对象URL赋值给实现写好的img标签的src属性 Fil ...
随机推荐
- 第10组 Alpha冲刺(4/6)
链接部分 队名:女生都队 组长博客: 博客链接 作业博客:博客链接 小组内容 恩泽(组长) 过去两天完成了哪些任务 描述 学习调用中国天气网API,接近实现天气推送功能 对天气推送的形式进行讨论及重确 ...
- Java_jdbc 基础笔记之八 数据库连接(写一个查询Student对象的方法)
public Student getStudent(String sql, Object... args) { // 查询Student对象 Student stu = null; Connectio ...
- RedHat离线安装Python3以及各种依赖
RedHat离线安装Python3以及各种依赖 1, yum install -y ncurses-libs zlib-devel mysql-devel bzip2-devel openssl-de ...
- web编辑器的使用比较
一开始测试的时候发现都还可以,只是出于后续考虑,选择了ckeditor,但是有时候会莫名出现Cannot read property 'XXX' of undefined,如下: Uncaught T ...
- Activiti6 应用安装 activiti-admin,activiti-app,activiti-rest
activiti6安装包中 1/直接将三个war包放入tomcat中,即可运行,使用H2内存数据库 2/使用mysql数据库运行 2.1/activiti-admin # security confi ...
- openresty开发系列33--openresty执行流程之2重写赋值阶段
openresty开发系列33--openresty执行流程之2重写赋值阶段 一)重写赋值阶段 1)set_by_lua 语法:set_by_lua $res <lua-script-str&g ...
- Mac删除自带的abc输入法
1. 安装软件:https://pan.baidu.com/s/15oIzTDojpignoR5MiZ-Q1A 安装并注册 2. 进入到目录,并打开: 1. /Users/toov5/Library/ ...
- Ehcache 学习入门
目录 介绍 导入jar包 创建配置文件 第一个使用示例 配置文件解析 第一部分:CacheManager 第二部分:diskStore 第三部分:cache 总结 介绍 网上有很多关于Ehcache的 ...
- [译]为什么在__new __()后总是调用__init __()?
原文来源: https://stackoverflow.com/questions/674304/why-is-init-always-called-after-new 需要控制新实例的创建时,请使用 ...
- 安装tensorflow2.0
pip install tensorflow==2.0.0 -i https://pypi.tuna.tsinghua.edu.cn/simple import tensorflow as tfpri ...