jQuery获取file控件中图片的宽高与大小


Posted in Javascript onAugust 04, 2016

问题

如何判断input file表单里上传的图片的宽高和大小呢?

解决方案

这个时候图片还没真正上传,也不是在页面上展示,不能使用$(“#id”).width(),$(“#id”).height()这种方式。

在Stack Overflow找到一个方法获取input file图片文件的宽高:

var _URL = window.URL || window.webkitURL;
$("#file").change(function (e) {
  var file, img;
  if ((file = this.files[0])) {
    img = new Image();
    img.onload = function () {
      alert(this.width + " " + this.height);
    };
    img.src = _URL.createObjectURL(file);
  }
});

发现可以用,仅在火狐中测试了,其他浏览器兼容性未知,因为后台使用,所以暂且不管兼容性,拿来封装了一下。

我把这个函数完善了一下,获取input file图片的宽高和大小,如下:

//获取input图片宽高和大小
function getImageWidthAndHeight(id, callback) {
  var _URL = window.URL || window.webkitURL;
  $("#" + id).change(function (e) {
    var file, img;
    if ((file = this.files[0])) {
      img = new Image();
      img.onload = function () {
        callback && callback({"width": this.width, "height": this.height, "filesize": file.size});
      };
      img.src = _URL.createObjectURL(file);
    }
  });
}

这里使用了一个回调方法,回调方法的参数是这个json对象,包含宽度、高度和大小,在jQuery中这样调用

(function () {
  //省略其他代码
  getImageWidthAndHeight('image_file', function (obj) {
   if (obj.width != 843 || obj.height != 1038) {
    $.messager.alert('操作提示', '弹窗图片宽高必须是843*1038px');
   }
  });
})(jQuery)

好了,这样就OK了。以上就是jQuery获取intput file图片的宽高和大小的全部内容了,相信本文的内容会对大家平时使用jQuery和图片上传的时候很有帮助的。

Javascript 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
Apr 08 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jQuery实现的简单折叠菜单(折叠面板)效果代码
Sep 16 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
Oct 24 Javascript
基于JavaScript实现本地图片预览
Feb 08 Javascript
bootstrap Validator 模态框、jsp、表单验证 Ajax提交功能
Feb 17 Javascript
Vue报错:Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#‘的解决方法
Jun 17 Javascript
vue使用监听实现全选反选功能
Jul 06 Javascript
Node.js API详解之 dns模块用法实例分析
May 15 Javascript
vue实现前端分页完整代码
Jun 17 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
JS 数字转换为大写金额的简单实例
Aug 04 #Javascript
js事件冒泡、事件捕获和阻止默认事件详解
Aug 04 #Javascript
使用伪命名空间封装保护独自创建的对象方法
Aug 04 #Javascript
全面解析Angular中$Apply()及$Digest()的区别
Aug 04 #Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 #Javascript
js实现多图左右切换功能
Aug 04 #Javascript
window.open打开窗口被拦截的快速解决方法
Aug 04 #Javascript
You might like
PHP+Mysql日期时间如何转换(UNIX时间戳和格式化日期)
2012/07/15 PHP
无刷新动态加载数据 滚动条加载适合评论等页面
2013/10/16 PHP
ThinkPHP表单自动提交验证实例教程
2014/07/18 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
jquery属性过滤选择器使用示例
2013/06/18 Javascript
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
js通过location.search来获取页面传来的参数
2014/09/11 Javascript
JavaScript实现向setTimeout执行代码传递参数的方法
2015/04/16 Javascript
vue自定义键盘信息、监听数据变化的方法示例【基于vm.$watch】
2019/03/16 Javascript
教你搭建按需加载的Vue组件库(小结)
2019/07/29 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
webstorm建立vue-cli脚手架的傻瓜式教程
2020/09/22 Javascript
在vue中使用inheritAttrs实现组件的扩展性介绍
2020/12/07 Vue.js
教大家使用Python SqlAlchemy
2016/02/12 Python
在centos7中分布式部署pyspider
2017/05/03 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
pytorch: Parameter 的数据结构实例
2019/12/31 Python
Python读写csv文件流程及异常解决
2020/10/20 Python
python中requests模拟登录的三种方式(携带cookie/session进行请求网站)
2020/11/17 Python
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
Pam & Gela官网:美国性感前卫女装品牌
2018/07/19 全球购物
关于群众路线的心得体会
2014/11/05 职场文书
收费员岗位职责
2015/02/14 职场文书
2015年新学期寄语
2015/02/26 职场文书
综合测评自我评价
2015/03/06 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
日本读研:怎样写好一篇日本研究计划书?
2019/07/15 职场文书
奖学金申请书(范文)
2019/08/14 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python
使用logback实现按自己的需求打印日志到自定义的文件里
2021/08/30 Java/Android
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js