js 获取图片宽高 和 图片大小
获取要查看大小的img
var img_url = 'http://img5.imgtn.bdimg.com/it/u=4267222417,1017407570&fm=200&gp=0.jpg' // 创建img对象 var img = new Image(); // 改变图片的src img.src = img_url; // 加载完成执行 img.onload = function(){ // 打印 alert('width:'+img.width+',height:'+img.height);获取当前图片的大小
<body>
<img id="image" src="" width="200px" ; height="200px" ;/>
<br/>
<input type="file" onchange="selectImage(this);" />
<br/>
<input type="button" onclick="uploadImage();" value="提交" />
<script>
var image = '';
function selectImage(file) {
console.log(file.files) //输出的数值如下:

console.log(file.files[0].size) //获取大小
输出的是字节 1kb = 1024b 所以想转化的话 就要 parseInt(file.files.size / 1024) // 这样的结果就是kb
if (!file.files || !file.files[0]) {
return;
}
var reader = new FileReader();
reader.onload = function (evt) {
document.getElementById('image').src = evt.target.result;
image = evt.target.result;
}
reader.readAsDataURL(file.files[0]);
}
function uploadImage() { $.ajax({ type: 'POST', url: 'admin.php', data: { image: image }, async: false, dataType: 'json', success: function (data) {
consoel.log(data)
if (data.success) { alert('上传成功'); } else { alert('上传失败'); } }, error: function (err) {
console.log(err)
alert('网络故障'); } }); }
</script>
</body>
js 获取图片宽高 和 图片大小的更多相关文章
- JS获取网页宽高方法集合
JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- js获取各种宽高方法
屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
- Flutter获取屏幕宽高和Widget大小
我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下, ...
- js获取屏幕宽高
最近想自己实现一个全屏滚动. 结果一开始就遇到了问题.因为不知道如何获取一个页面屏幕的高度. 网上所有的博客都是复制粘贴. 网页可见区域宽:document.body.clientWidth 网页可见 ...
- js获取浏览器宽高
IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
- js获取网页宽高
<script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body. ...
- js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等(带图片说明)
网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.bo ...
随机推荐
- W3C Blog: HTML-下一步是什么?
HTML5.1 草稿版: 地址:https://www.w3.org/TR/html51/introduction.html#a-quick-introduction-to-html 2016年3月0 ...
- python之更加抽象 2014-4-6
#更加抽象 12:50pm- 14:50 p112- 1.对象的魔力 多态 如count 在多种数据类型中都可以实现计数的功能 封装 对全局作用域中其他区域隐藏多余信息的原则 继承2.类和类型 创建类 ...
- BNUOJ 7697 Information Disturbing
Information Disturbing Time Limit: 3000ms Memory Limit: 65536KB This problem will be judged on HDU. ...
- CMM
CMM CMM的基本概念 CMM(Capability Maturity Model for Software) 它是对于软件组织在定义,实施,度量,控制和改善其软件过程的实践中各个发展阶段的描述.其 ...
- Leetcode 150.逆波兰表达式求值
逆波兰表达式求值 根据逆波兰表示法,求表达式的值. 有效的运算符包括 +, -, *, / .每个运算对象可以是整数,也可以是另一个逆波兰表达式. 说明: 整数除法只保留整数部分. 给定逆波兰表达式总 ...
- HTML5 & CSS3 & font-family
HTML5 & CSS3 & font-family 中文字体的英文名称 宋体* SimSun 黑体* SimHei 微软雅黑* Microsoft YaHei 微软正黑体 http: ...
- DD & E-app
DD & E-app 企业内部开发的E应用 前端 demo https://github.com/open-dingtalk docs https://open-doc.dingtalk.co ...
- 【HDOJ3047】Zjnu Stadium(带权并查集)
题意:浙江省第十二届大学生运动会在浙江师范大学举行,为此在浙师大建造了一座能容纳近万人的新体育场. 观众席每一行构成一个圆形,每个圆形由300个座位组成,对300个座位按照顺时针编号1到300,且可以 ...
- ***每天一个linux命令(5):rm 删除命令
昨天学习了创建文件和目录的命令mkdir ,今天学习一下linux中删除文件和目录的命令: rm命令.rm是常用的命令,该命令的功能为删除一个目录中的一个或多个文件或目录,它也可以将某个目录及其下的所 ...
- 欧拉 路径&&回路
不管 欧拉回路 还是 欧拉路径 无向图或者有向图(删除方向后)要联通 欧拉路径存在的判定条件 1 无向图 度数为奇数的点最多有两个 2 有向图 最多只能有两个点的入度不等于出度 ...