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 window.open打开新窗口后无法再次打开该窗口问题的解决方法
Apr 12 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
JavaScript中的对象的extensible属性介绍
Dec 30 Javascript
js使用DOM设置单选按钮、复选框及下拉菜单的方法
Jan 20 Javascript
浏览器中url存储的JavaScript实现
Jul 07 Javascript
JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解
Aug 06 Javascript
jquery实现鼠标滑过后动态图片提示效果实例
Aug 10 Javascript
如何用js判断dom是否有存在某class的值
Feb 13 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
Apr 17 Javascript
vue移动端UI框架实现QQ侧边菜单组件
Mar 09 Javascript
vscode中Vue别名路径提示的实现
Jul 31 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 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
一个目录遍历函数
2006/10/09 PHP
PHP 编程的 5个良好习惯
2009/02/20 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP 模拟登陆功能实例详解
2019/09/10 PHP
js验证表单第二部分
2006/11/25 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
2009/08/04 Javascript
JavaScript的类型转换(字符转数字 数字转字符)
2010/08/30 Javascript
JavaScript使用cookie实现记住账号密码功能
2015/04/27 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Jquery实现上下移动和排序代码
2016/10/17 Javascript
vue源码入口文件分析(推荐)
2018/01/30 Javascript
vue 中swiper的使用教程
2018/05/22 Javascript
详解jquery和vue对比
2019/04/16 jQuery
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
2019/05/12 Javascript
JS中比Switch...Case更优雅的多条件判断写法
2019/09/05 Javascript
[00:34]拔城逐梦,热血永恒!2020(秋)完美世界城市挑战赛报名开启
2020/10/09 DOTA
python的常见命令注入威胁
2013/02/18 Python
Python求两个文本文件以行为单位的交集、并集与差集的方法
2015/06/17 Python
Python 爬虫图片简单实现
2017/06/01 Python
基于pandas将类别属性转化为数值属性的方法
2018/07/25 Python
python复制列表时[:]和[::]之间有什么区别
2018/10/16 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
Django文件存储 默认存储系统解析
2019/08/02 Python
python global关键字的用法详解
2019/09/05 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
Python图像处理库PIL的ImageDraw模块介绍详解
2020/02/26 Python
在matplotlib中改变figure的布局和大小实例
2020/04/23 Python
vue.js刷新当前页面的实例讲解
2020/12/29 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
泰国的头号网上婴儿用品店:Motherhood.co.th
2019/04/09 全球购物
初一家长会邀请函
2014/01/31 职场文书
元旦晚会策划方案
2014/02/18 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
嘉宾邀请函
2015/01/31 职场文书
2015年后备干部工作总结
2015/05/15 职场文书
Python学习之包与模块详解
2022/03/19 Python