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实现简易的移动端验证表单
Nov 08 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
使用BootStrap实现悬浮窗口的效果
Dec 13 Javascript
javascript基础知识讲解
Jan 11 Javascript
jQuery插件jqGrid动态获取列和列字段的方法
Mar 03 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
May 05 Javascript
如何使用JavaScript实现栈与队列
Jun 24 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
vue+canvas实现拼图小游戏
Sep 18 Javascript
JavaScript与JQuery框架基础入门教程
Jul 15 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
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP+redis实现的限制抢购防止商品超发功能详解
2019/09/19 PHP
Centos7安装swoole扩展操作示例
2020/03/26 PHP
js中document.write的那点事
2014/12/12 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
jQuery实现右键菜单、遮罩等效果代码
2016/09/27 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
JS实现运动缓冲效果的封装函数示例
2018/02/18 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
2018/10/24 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
vue项目从node8.x升级到12.x后的问题解决
2019/10/25 Javascript
node koa2 ssr项目搭建的方法步骤
2020/12/11 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
Python编程中用close()方法关闭文件的教程
2015/05/24 Python
举例讲解如何在Python编程中进行迭代和遍历
2016/01/19 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Python批处理更改文件名os.rename的方法
2018/10/26 Python
Python之两种模式的生产者消费者模型详解
2018/10/26 Python
Python两台电脑实现TCP通信的方法示例
2019/05/06 Python
Python实现一个优先级队列的方法
2020/07/31 Python
pycharm不以pytest方式运行,想要切换回普通模式运行的操作
2020/09/01 Python
CSS3实现文字描边的2种方法(小结)
2020/02/14 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
TCP协议通讯的过程和步骤是什么
2015/10/18 面试题
超市后勤自我鉴定
2014/01/17 职场文书
如何写自我评价?自我评价写什么好?
2014/03/14 职场文书
2014年教师节演讲稿范文
2014/09/10 职场文书
离婚协议书怎么写
2014/09/12 职场文书
向国旗敬礼活动总结
2014/09/27 职场文书
2014年会计工作总结
2014/11/27 职场文书
工作经验交流材料
2014/12/30 职场文书
2016高校自主招生自荐信范文
2016/01/28 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书