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 相关文章推荐
火狐浏览器(firefox)下获得Event对象以及keyCode
Nov 13 Javascript
js实现点小图看大图效果的思路及示例代码
Oct 28 Javascript
js实现点击左右按钮轮播图片效果实例
Jan 29 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
全面了解JavaScript的数据类型转换
Jul 01 Javascript
JS控制静态页面之间传递参数获取参数并应用的简单实例
Aug 10 Javascript
Javascript使用SWFUpload进行多文件上传
Nov 16 Javascript
微信小程序 less文件编译成wxss文件实现办法
Dec 05 Javascript
Bootstrap下拉菜单Dropdowns的实现代码
Mar 17 Javascript
SeaJS中use函数用法实例分析
Oct 10 Javascript
快速搭建React的环境步骤详解
Nov 06 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
example1.php
2006/10/09 PHP
Zend Studio 无法启动的问题解决方法
2008/12/04 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
Convert Seconds To Hours
2007/06/16 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
你可能不知道的JavaScript的new Function()方法
2014/04/17 Javascript
Javascript玩转继承(一)
2014/05/08 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
网页中表单按回车就自动提交的问题的解决方案
2014/11/03 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
javascript与jquery中的this关键字用法实例分析
2015/12/24 Javascript
Node.js开发者必须了解的4个JS要点
2016/02/21 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
Vue实战之vue登录验证的实现代码
2017/10/31 Javascript
vue路由跳转传参数的方法
2019/05/06 Javascript
python安装与使用redis的方法
2016/04/19 Python
Python聊天室程序(基础版)
2018/04/01 Python
Python numpy 提取矩阵的某一行或某一列的实例
2018/04/03 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python中logging实例讲解
2019/01/17 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
2017/07/13 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
Rakuten Kobo台湾:电子书、eReaders和Reading应用程式
2017/11/24 全球购物
GC是什么?为什么要有GC?
2013/12/08 面试题
大三预备党员入党思想汇报
2014/01/08 职场文书
企业精细化管理实施方案
2014/03/23 职场文书
暑期政治学习心得体会
2014/09/02 职场文书
民事诉讼代理授权委托书范本
2014/10/08 职场文书
小学优秀教师材料
2014/12/15 职场文书
社区党支部公开承诺书
2015/04/29 职场文书
房屋维修申请报告
2015/05/18 职场文书
Python用any()函数检查字符串中的字母以及如何使用all()函数
2022/04/14 Python