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 导出数据到Excel(处理table中的元素)
Dec 18 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
js实现在同一窗口浏览图片
Sep 17 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
Sep 20 Javascript
Node.js 数据加密传输浅析
Nov 16 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
AngularJS 前台分页实现的示例代码
Jun 07 Javascript
vue定义全局变量和全局方法的方法示例
Aug 01 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
javascript贪吃蛇游戏设计与实现
Sep 17 Javascript
JavaScript函数柯里化
Nov 07 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 命令行参数详解及应用
2011/05/18 PHP
coreseek 搜索英文的问题详解
2013/06/08 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
2007/01/29 Javascript
javascript制作2048游戏
2015/03/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Node.js 文件夹目录结构创建实例代码
2016/07/08 Javascript
EsLint入门学习教程
2017/02/17 Javascript
MUI  Scroll插件的使用详解
2017/04/13 Javascript
layui实现tab的添加拒绝重复的方法
2019/09/04 Javascript
Vue的自定义组件不能使用click方法的解决
2020/07/28 Javascript
JS面向对象实现飞机大战
2020/08/26 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
python 算法 排序实现快速排序
2012/06/05 Python
Python复制文件操作实例详解
2015/11/10 Python
python实现将excel文件转化成CSV格式
2018/03/22 Python
django manage.py扩展自定义命令方法
2018/05/27 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
python opencv实现图像边缘检测
2019/04/29 Python
django框架自定义模板标签(template tag)操作示例
2019/06/24 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
基于python实现语音录入识别代码实例
2020/01/17 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
Python爬虫爬取杭州24时温度并展示操作示例
2020/03/27 Python
django跳转页面传参的实现
2020/09/17 Python
英国领先的高街书籍专家:Waterstones
2018/02/01 全球购物
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
ktv收银员岗位职责
2013/12/16 职场文书
销售总监岗位职责
2014/01/04 职场文书
药学职务聘任书
2014/03/29 职场文书
单位委托书怎么写
2014/09/21 职场文书
2015年店长工作总结范文
2015/04/08 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
MySQL 8.0 驱动与阿里druid版本兼容问题解决
2021/07/01 MySQL
MySQL 四种连接和多表查询详解
2021/07/16 MySQL