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 相关文章推荐
jquery插件之easing 动态菜单
Aug 21 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
有关suggest快速删除后仍然出现下拉列表的bug问题
Dec 02 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
Bootstrap select多选下拉框实现代码
Dec 23 Javascript
js实现4个方向滚动的球
Mar 06 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 Javascript
vue 登录滑动验证实现代码
Aug 24 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
PHP中STDCLASS用法实例分析
2016/11/11 PHP
thinkphp分页集成实例
2017/07/24 PHP
Laravel6.2中用于用户登录的新密码确认流程详解
2019/10/16 PHP
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
浅析ajax请求json数据并用js解析(示例分析)
2013/07/13 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery实现跨域
2015/02/03 Javascript
微信小程序 location API实例详解
2016/10/02 Javascript
Vue.js一个文件对应一个组件实践
2016/10/27 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
JavaScript实现左右下拉框动态增删示例
2017/03/09 Javascript
Angular2仿照微信UI实现9张图片上传和预览的示例代码
2017/10/19 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
JS实现简单的表格增删
2020/01/16 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
python中sleep函数用法实例分析
2015/04/29 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
python 采集中文乱码问题的完美解决方法
2016/09/27 Python
python pandas实现excel转为html格式的方法
2018/10/23 Python
python文档字符串(函数使用说明)使用详解
2019/07/30 Python
python类的实例化问题解决
2019/08/31 Python
基于Tensorflow使用CPU而不用GPU问题的解决
2020/02/07 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
python实现梯度法 python最速下降法
2020/03/24 Python
Python爬虫爬取糗事百科段子实例分享
2020/07/31 Python
python 将html转换为pdf的几种方法
2020/12/29 Python
美国购买新书和二手书网站:Better World Books
2018/10/31 全球购物
大学生求职简历的自我评价
2013/10/21 职场文书
大学生职业生涯规划书范文
2014/01/14 职场文书
2014年乡镇植树节活动方案
2014/02/28 职场文书
户外活动总结范文
2014/04/30 职场文书
如何用python绘制雷达图
2021/04/24 Python
python关于集合的知识案例详解
2021/05/30 Python