JavaScript上传图片及时预览
/*******************************正面图片上传预览开始****************************/
function previewImage(file) //img便签调用该函数 οnchange="previewImage(this),onchange 事件会在域的内容改变时发生。
{
var MAXWIDTH = 100; //宽度
var MAXHEIGHT = 100; //高度
var div = document.getElementById('preview'); //获取div控件id为preview的元素 同jQuery “var div=$("#preview");”
if (file.files && file.files[0])
{
//div.innerHTML ='<img id=imghead1>';//innerHTML:重新设置div内的html代码
var img = document.getElementById('imghead1'); //获取img控件id为imghead1的元素 同jQuery “var div=$("#imghead1");”
img.onload = function(){ //img控件点击事件,同于控件调用非匿名函数
//裁剪图片尺寸
var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight); //img.offsetWidth、img.offsetHeight img控件的高度和宽度
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;}//获取到成功读取的文件内容,并以插入一个img节点的方式显示选中的图片。
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=imghead1>';
var img = document.getElementById('imghead1');
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;
}
/*******************************正面图片上传预览结束****************************/
源码云盘地址: http://pan.baidu.com/s/1nuPx1xf 提取码: bnyg
<div class="pic" id="preview" >
<img class="sfimg" runat="server" id="imghead1" src="" />
<input type="hidden" runat="server" id="pictruePet" value="0" />
</div>
转载于:https://www.cnblogs.com/LOVEJIEYING/p/5465291.html
JavaScript上传图片及时预览相关推荐
- javascript --- [FormData的使用] 文件上传进度条展示 文件上传图片即使预览
1. 准备工作 因为要发送Ajax请求,而Ajax技术的运行需要网站环境,因此其中一个解决方案是,将页面作为网站的静态资源暴露出来,然后通过浏览器进行访问. 1.1 静态资源 使用express将pu ...
- 本地如何预览php文件上传,如何实现js上传图片本地预览同时支持预览截图的功能...
在项目中经常会用到js上传图片本地预览的效果,同时需要在预览图上直接预览截图的范围. 下面是我写的简单的demo,是用js结合cropper.js模拟实现此项前端的功能,后台则不考虑. 准备:引入文件 ...
- 2016/4/19 ①单个文件上传 ②上传图片后 预览图片
1,f1.php <!DOCTYPE html> <htmllang="en"> <head><metacharset="UTF ...
- js上传图片进行预览
js上传图片进行预览 上传图片经常遇到这样的问题,就是需要实现预览,由于浏览器的安全机制,不能直接读取本地文件,所以需要使用js绕一圈实现预览效果 HTML代码如下 <input type=&q ...
- 模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存
模仿微信朋友圈 图片浏览 js javascript 支持图片预览,滑动切换,双指缩放,图片缓存 2017年08月10日 12:11:38 阅读数:2311 previewImage-mobile 仿 ...
- jquery上传图片本地预览插件V1.2
v1.2 1.修复jquery版本高于1.9,插件报错BUG. 2.提供未压缩代码. 插件支持IE全系列 谷歌 火狐 等浏览器 注意:不支持safari 插件使用说明: 1.必须引用jquery ...
- ajax图片预览,Ajax 上传图片并预览的简单实现
1. 直接上最简单的 一种 ajax 异步上传图片,并预览 html: 图片上传 | cookie file: desc: function upload() { $.ajaxFileUpload({ ...
- thinkphp5通过ajax上传图片并预览
thinkphp5通过ajax上传图片并预览 一.具体需求如图所术: 二.html代码: 三.js代码 四.控制器php代码: 一.具体需求如图所术: 二.html代码: <form class ...
- Vue前端JavaScript实现PDF预览与图片预览
Vue前端JavaScript实现PDF预览与图片预览 说明 PDF.JS 代码实现 预览测试 embed与iframe标签 `<embed>` `<iframe>` 浏览器预 ...
最新文章
- 如何从NumPy直接创建RNN?
- 图像数据集如何制作?增强??
- centos 查看mysql 服务器配置_在CentOS上MySQL数据库服务器配置方法
- python程序格式框架的描述_python 程序语言设计(嵩天)-学习笔记(第二章python 程序实例解析)...
- call,apply
- 如何使用JavaScript检查输入是否为空
- MySQL事务处理特性的实现原理
- 用联发科芯片的手机能升级鸿蒙吗,华为鸿蒙系统降临!首批升级手机确定,联发科芯片被放弃?...
- pkg_resources.DistributionNotFound: The 'psutil=5.6.1; platform_python_implementation== 报错解决
- return 0在c语言中是什么意思_单次T+0与蓝筹股试点T+0制度是什么意思,两者有何区别?...
- es做mysql二级索引_用Elasticsearch实现HBase二级索引
- Xutils使用详解(二)
- windows x64和x86的区别
- 【游戏开发】小白学Lua(上)
- Hypothesis Test Overview
- 测试成长方程01:费曼技巧
- Cadence常规通孔焊盘的创建
- OAI搭建——硬件准备
- 什么是惊群,如何有效避免惊群?
- 苹果发布iOS 11.2新测试版:只为iPhone X
热门文章
- python的for循环累加_在python中将6 for循环累计和矢量化
- 【maven】mvn -pl 指定模块
- javacript 裁切图片
- 【spring boot】【thymeleaf】SPEL调用静态方法和静态属性
- oracle查看执行最慢与查询次数最多的sql语句
- 最长回文串--动态规划
- 沃森变频器故障12_维修电工浅谈:常见的变频器故障及处理
- java线程实例题_java线程相关试题实例源码代码
- mysql开启binlog启动慢_mysql的binlog和slow_log慢日志
- android微信电话锁屏,iPhone的微信更新锁屏下呼叫提醒,终于可以直接代替电话了...