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 相关文章推荐
用javascript实现点击链接弹出"图片另存为"而不是直接打开
Aug 15 Javascript
dojo学习第二天 ajax异步请求之绑定列表
Aug 29 Javascript
jquery text(),val(),html()方法区别总结
Nov 04 Javascript
js 本地预览的简单实现方法
Feb 18 Javascript
Javascript简写条件语句(推荐)
Jun 12 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
JS获取浮动(float)元素的style.left值为空的快速解决办法
Feb 19 Javascript
纯JS实现图片验证码功能并兼容IE6-8(推荐)
Apr 19 Javascript
vue与TypeScript集成配置最简教程(推荐)
Oct 17 Javascript
angularJs中ng-model-options设置数据同步的方法
Sep 30 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
Aug 07 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
Sep 05 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
模仿OSO的论坛(一)
2006/10/09 PHP
php 保留小数点
2009/04/21 PHP
php结合表单实现一些简单功能的例子
2011/06/04 PHP
ThinkPHP空模块和空操作详解
2014/06/30 PHP
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php中ltrim()、rtrim()与trim()删除字符空格实例
2014/11/25 PHP
php读取torrent种子文件内容的方法(测试可用)
2016/05/03 PHP
JMenuTab简单使用说明
2008/03/13 Javascript
javascript 装载iframe子页面,自适应高度
2009/03/20 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
jQuery学习笔记之控制页面实现代码
2012/02/27 Javascript
JS对象转换为Jquery对象实现代码
2013/12/29 Javascript
JavaScript数据结构和算法之二叉树详解
2015/02/11 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
JavaScript如何动态创建table表格
2020/08/02 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
深入理解jquery跨域请求方法
2016/05/18 Javascript
微信小程序 页面传值详解
2017/03/10 Javascript
javascript 判断一个对象为数组的方法
2017/05/03 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
基于vue.js实现分页查询功能
2018/12/29 Javascript
vue实现弹幕功能
2019/10/25 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
Python中shape计算矩阵的方法示例
2017/04/21 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
python中ImageTk.PhotoImage()不显示图片却不报错问题解决
2018/12/06 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
Python request操作步骤及代码实例
2020/04/13 Python
关于python 的legend图例,参数使用说明
2020/04/17 Python
python3读取autocad图形文件.py实例
2020/06/05 Python
如何快速一次性卸载所有python包(第三方库)呢
2020/10/20 Python
新加坡航空官方网站:Singapore Airlines
2016/10/13 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
《弟子规》读后感:知廉耻、明是非、懂荣辱、辨善恶
2019/12/03 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python