获取要查看大小的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 获取图片宽高  和 图片大小的更多相关文章
	

    
						
  1. JS获取网页宽高方法集合
		
    JS获取网页宽高等方法的集合:document.body.clientWidth - 网页可见区域宽document.body.clientHeight - 网页可见区域高 document.body ...
    
		
    2. 
						
  2. JS获取元素宽高的两种情况
		
    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...
    
		
    3. 
						
  3. 原生JS获取元素宽高实践详解
		
    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
    
		
    4. 
						
  4. js获取各种宽高方法
		
    屏幕的有效宽高: window.screen.availHeightwindow.screen.availWidth 网页可见区域宽:document.body.clientWidth 网页可见区域高 ...
    
		
    5. 
						
  5. Flutter获取屏幕宽高和Widget大小
		
    我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下, ...
    
		
    6. 
								
  6. js获取屏幕宽高
		
    最近想自己实现一个全屏滚动. 结果一开始就遇到了问题.因为不知道如何获取一个页面屏幕的高度. 网上所有的博客都是复制粘贴. 网页可见区域宽:document.body.clientWidth 网页可见 ...
    
		
    7. 
						
  7. js获取浏览器宽高
		
    IE中: document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.d ...
    
		
    8. 
						
  8. js获取网页宽高
		
    <script> function getInfo() { var s = ""; s += " 网页可见区域宽:"+ document.body. ...
    
		
    9. 
						
  9. js获取浏览器宽高、网页宽高、屏幕宽高、鼠标位置等（带图片说明）
		
    网页可见区域宽: document.body.clientWidth;网页可见区域高: document.body.clientHeight;(点击查看大图) 网页可见区域宽: document.bo ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. python接口测试之序列化与反序列化（四）
			
    在python中,序列化可以理解为:把python的对象编码转换为json格式的字符串,反序列化可以理解为:把json格式 字符串解码为python数据对象.在python的标准库中,专门提供了jso ...
    
			
    2. 
						
  2. eclipse中自动生成注释
			
    eclipse中自动生成注释 包前缀设置的地方 注释模板设置的地方 Eclipse自动生成方法注释 快捷键 自动生成方法的注释格式,例如 /*** @param str* @return* @thro ...
    
			
    3. 
						
  3. hihoCoder#1069 最近公共祖先·三
			
    原题地址 根据提示用Spase Table做 将Tree先展成List,因为数组长度等于边数的2倍,树中边数等于节点数-1,所以List数组只要开2倍节点数大小即可 WA了几次,原来是查询的时候出现左 ...
    
			
    4. 
						
  4. ZOJ 3329 期望DP
			
    题目大意: 给定3个已经规定好k1,k2,k3面的3个色子,如果扔到a,b,c则重新开始从1 计数,否则不断叠加所有面的数字之和,直到超过n,输出丢的次数的数学期望 我们在此令dp[]数组记录从当前数 ...
    
			
    5. 
						
  5. [luoguP1489] 猫狗大战（DP）
			
    传送门 类似背包的做法. f[i][j]表示是否能放i个物品,价格为j #include <cstdio> #include <iostream> #define N 8001 ...
    
			
    6. 
						
  6. 运算符、流程控制、while循环
			
    运算符: 1. 算术运算符: “ + ”.“ - ” .“ * ” .“ / ” 分别为加.减.乘.除. # % 是“取模运算符”,就是返回除法的余数.eg. a = 3, b=5, b % a 就是 ...
    
			
    7. 
						
  7. DEA中MAVEN项目有多个子目录，如何加载构建
			
    ddts这个项目有三个子目录,每个子目录下面也都有一个 pom.xml       此时需要 右键子目录的 pom.xml,选择Add as Maven Project,在上图中cli.core两个目 ...
    
			
    8. 
						
  8. 【HDOJ6148】Valley Numer（数位DP）
			
    题意: 1≤T≤200 ● 1≤length(N)≤100 思路: 设f[i,j,k,l]为第i位为j,前i位是否贴上限(0/1),递减或递增(0/1)方案数 g[i,j,k]为不到n位,第i位为j, ...
    
			
    9. 
						
  9. Linux下汇编语言学习笔记66 ---
			
    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...
    
			
    10. 
						
  10. 在 Windows 10 64 下安装 Memcached，安装 PHP 7.0.22 的 Memcache 扩展
			
    1.之前写过一篇在 PHP 5.6.27 下的博客:http://www.shuijingwanwq.com/2017/09/11/1892/ ,此次是 PHP 7.0.22 下的,如图1 图1 2. ...
    
			
    11.