首页 > 代码库 > JS判断图片上传时文件大小和图片尺寸
JS判断图片上传时文件大小和图片尺寸
如何读取图片的size：
首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：
这样的话，我们就可以检测到size。（这里的size是字节大小）
1 var fileData = http://www.mamicode.com/file.files[0];2 var size = fileData.size; //注意，这里读到的是字节数3 var isAllow = false;4 var maxSize = Max_Size;5 maxSize = maxSize * 1024; //转化为字节6 isAllow = size <= maxSize;
– 兼容性：ie9下读不到input file.files这个属性。
如何获取图片的width、height:
1.图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
2.兼容性：IE下使用滤镜来处理图片尺寸控制。
1 <html> 2 <head> 3 <title>测试</title> 4 <meta charset="utf-8"/> 5 6 7 </head> 8 <body> 9 10 <form action="" method="post"> 11 <input type="file" id="uploader"/> 12 <input type="submit" id="submit"/> 13 </form> 14 <div id="tip1"></div> 15 <div id="tip2"></div> 16 <script> 17 18 19 20 21 22 var Max_Size = 2000; //2M 23 var Max_Width = 100; //100px 24 var Max_Height = 200; //200px 25 26 $(‘#submit‘).on(‘change‘,function(ev){ 27 28 var fileEl = this; 29 30 console.log(fileEl); 31 32 testMaxSize(fileEl); 33 testWidthHeight(fileEl); 34 }) 35 36 function testMaxSize(file){ 37 if(file.files && file.files[0]){ 38 var fileData = http://www.mamicode.com/file.files[0];"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;" />‘).appendTo(‘body‘).getDOMNode(); 95 img.filters.item(‘DXImageTransform.Microsoft.AlphaImageLoader‘).src = http://www.mamicode.com/src;>JS判断图片上传时文件大小和图片尺寸
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。