今天在做图片上传的小功能，使用了一个kissy上传组件。很好奇它是如何在图片上传前，检测到图片的大小和尺寸的？我们来写个小实例实现一下吧

如何读取图片的size

首先，原生input file控件有个files属性，该属性是一个数组。数组中的元素有以下属性：lastModifiedDate，name，size，type，webkitRelativePath，如图：

这样的话，我们就可以检测到size。

  1. var fileData = file.files[0];
  2. var size = fileData.size;   //注意，这里读到的是字节数
  3. var isAllow = false;
  4. var maxSize = Max_Size;
  5. maxSize = maxSize * 1024;   //转化为字节
  6. isAllow = size <= maxSize;

– 兼容性：ie9下读不到input file.files这个属性。思考：怎么办？

如何读取图片的width,height

  • 图片真实的宽度和高度，可以通过实例化Image对象、加载src 来获取。
  • 兼容性：IE下使用滤镜来处理图片尺寸控制

全部代码

  1.  <html>
  2.  <head>
  3.      <title>测试</title>
  4.      <meta charset="utf-8"/>
  5.      <link rel="stylesheet" href="http://g.tbcdn.cn/tb/global/2.9.1/global-min.css">
  6.      <script src="http://g.tbcdn.cn/??kissy/k/1.4.2/seed-min.js"></script>
  7.  </head>
  8.  <body>
  9.  
  10.  <form action="" method="post">
  11.      <input type="file" id="uploader"/>
  12.      <input type="submit" id="submit"/>
  13.  </form>
  14.  <div id="tip1"></div>
  15.  <div id="tip2"></div>
  16.  <script>
  17.  
  18.      //http://www.oschina.net/code/snippet_819257_22844
  19.      //https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js
  20.      KISSY.use('core',function(S){
  21.          var $ = S.all, D = S.DOM;
  22.          var Max_Size = 2000; //2M
  23.          var Max_Width = 100; //100px
  24.          var Max_Height = 200; //200px
  25.  
  26.          $('#submit').on('click',function(ev){
  27.              ev.halt();
  28.              var fileEl = D.get('#uploader');
  29.  
  30.              console.log(fileEl.files);
  31.  
  32.              testMaxSize(fileEl);
  33.              testWidthHeight(fileEl);
  34.          })
  35.  
  36.          function testMaxSize(file){
  37.              if(file.files && file.files[0]){
  38.                  var fileData = file.files[0];
  39.  
  40.                  var size = fileData.size;   //注意，这里读到的是字节数
  41.                  var isAllow = false;
  42.                  if(!size) isAllow = false;
  43.  
  44.                  var maxSize = Max_Size;
  45.                  maxSize = maxSize * 1024;   //转化为字节
  46.                  isAllow = size <= maxSize;
  47.  
  48.                  showTip1(isAllow);
  49.  
  50.              }else{
  51.                  /*... ie9下用iframe上传*/
  52.                  /*
  53.                  // 或者用以面的方式实现
  54.                  // var img = new Image();
  55.                  // 再用img.src=filepath,再用img.fileSize用取，这里不写啦，读者自行实践一下
  56.                  */
  57.  
  58.              }
  59.  
  60.          }
  61.  
  62.          function testWidthHeight(file){
  63.              var isAllow = false;
  64.              debugger;
  65.  
  66.              if(file.files && file.files[0]){
  67.                  var fileData = file.files[0];
  68.  
  69.                  //读取图片数据
  70.                  var reader = new FileReader();
  71.                  reader.onload = function (e) {
  72.                      var data = e.target.result;
  73.                      //加载图片获取图片真实宽度和高度
  74.                      var image = new Image();
  75.                      image.onload=function(){
  76.                          var width = image.width;
  77.                          var height = image.height;
  78.                          isAllow = width >= Max_Width && height >= Max_Height;
  79.                          showTip2(isAllow);
  80.                      };
  81.                      image.src= data;
  82.                  };
  83.                  reader.readAsDataURL(fileData);
  84.  
  85.              }else{
  86.                  //IE下使用滤镜来处理图片尺寸控制
  87.                  //文件name中IE下是完整的图片本地路径
  88.                  var input = D.get('#uploader');
  89.                  //var input = uploader.get('target').all('input').getDOMNode();
  90.                  input.select();
  91.                  //确保IE9下，不会出现因为安全问题导致无法访问
  92.                  input.blur();
  93.                  var src = document.selection.createRange().text;
  94.                  var img = $('<img style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);width:300px;visibility:hidden;"  />').appendTo('body').getDOMNode();
  95.                  img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
  96.                  var width = img.offsetWidth;
  97.                  var height = img.offsetHeight;
  98.                  $(img).remove();
  99.  
  100.                  isAllow = width >= Max_Width && height >= Max_Height;
  101.                  showTip2(isAllow);
  102.              }
  103.  
  104.          }
  105.  
  106.          function showTip1(isAllow){
  107.              var tipEl = D.get('#tip1'),
  108.                      html = '';
  109.              if(isAllow){
  110.                  html = '大小通过</br>';
  111.              }else{
  112.                  html = '大小未通过，要求'+ Max_Size +'</br>';
  113.              }
  114.              D.html(tipEl,html);
  115.          }
  116.  
  117.          function showTip2(isAllow){
  118.              var tipEl = D.get('#tip2'),
  119.                      html = '';
  120.  
  121.              if(isAllow){
  122.                  html += '宽高通过';
  123.              }else{
  124.                  html += '宽高未通过，要求width:'+ Max_Width +', height:'+ Max_Height;
  125.              }
  126.              D.html(tipEl,html);
  127.          }
  128.  
  129.      })
  130.  
  131.  </script>
  132.  </body>
  133.  </html>

相关文章：

kissy uploader组件的有关校验的 源码地址：https://github.com/kissygalleryteam/uploader/blob/master/3.0.1/build/plugins/auth/auth.js

http://www.oschina.net/code/snippet_1242747_23669

http://www.oschina.net/code/snippet_819257_22844

js判断图片上传时的文件大小，和宽高尺寸的更多相关文章

  1. JS判断图片上传时文件大小和图片尺寸

    如何读取图片的size: 首先,原生input file控件有个files属性,该属性是一个数组.数组中的元素有以下属性:lastModifiedDate,name,size,type,webkitR ...

  2. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  3. html + js 实现图片上传，压缩，预览及图片压缩后得到Blob对象继续上传问题

    先上效果 上传图片后(设置了最多上传3张图片,三张后上传按钮消失) 点击图片放大,可以使用删除和旋转按钮 (旋转功能主要是因为ios手机拍照后上传会有写图片被自动旋转,通过旋转功能可以调正) html ...

  4. js实现图片上传预览及进度条

    原文js实现图片上传预览及进度条 最近在做图片上传的时候,由于产品设计的比较fashion,上网找了比较久还没有现成的,因此自己做了一个,实现的功能如下: 1:去除浏览器<input type= ...

  5. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

  6. PHP+js实现图片上传，编辑

    文件上传,点击按钮并选择文件后,文件会临时存到一个位置,会有一个临时名字: 然后在php文件中处理,给文件起名并将文件从临时为止搬到服务器,把需要的文件信息返回给前端页面: 最后表单提交时,把文件信息 ...

  7. js formData图片上传（单图上传、多图上传）后台java

    单图上传 <div class="imgUp">     <label>头像单图</label>     <input type=&quo ...

  8. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

  9. [前端 4] 使用Js实现图片上传预览

    导读:今天做图片上传预览,刚开始的做法是,先将图片上传到Nginx,然后重新加载页面才能看到这个图片.在这个过程中,用户一直都看不到自己上传的文件是什么样子.Ps:我发现我真的有强迫症了,都告诉我说不 ...

随机推荐

  1. 在虚拟机VM中安装的Ubuntu上安装和配置Hadoop

    一.系统环境: 我使用的Ubuntu版本是:ubuntu-12.04-desktop-i386.iso jdk版本:jdk1.7.0_67 hadoop版本:hadoop-2.5.0 二.下载jdk和 ...

  2. CentOs中iptables配置允许mysql远程访问

    在CentOS系统中防火墙默认是阻止3306端口的,我们要是想访问mysql数据库,我们需要这个端口,命令如下: 1 /sbin/iptables -I INPUT -p tcp --dport 30 ...

  3. AVCaptureSession 照相时获取 AVCaptureVideoPreviewLayer尺寸

    http://stackoverflow.com/questions/14153878/avcapturesession-preset-photo-and-avcapturevideopreviewl ...

  4. JavaScript继承方式详解

    原文链接 : http://segmentfault.com/a/1190000002440502 js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继 ...

  5. error LNK1123: 转换到 COFF 期间失败: 文件无效或损坏的解决方案

    首先,卸载相关的软件,然后删除所有和virtual studio相关的目录 然后如果还出现该问题,则: Mark一下,解决方法:将嵌入清单设置为"否" 发生场合:在用 C++写一个 ...

  6. 基于OpenCV的iOS开发笔记（1）

    本系列文章采用的的开发环境为: 1)Xcode 6 2)OpenCV for iOS 3.0.0 -------------------分割线---------------------------- ...

  7. 又遇BUG-ORA-01148：数据文件忽然变为recover状态

    现象: RAC环境,数据文件状态变为recover,查看alert日志有如下报错: Wed Jun 26 02:31:03 2013 Thread 1 advanced to log sequence ...

  8. 利用 SQL Monitor 查看语句运行状态步骤

    利用 SQL Monitor 查看语句运行状态步骤 1.确定语句被 SQL Monitor 监控 SQL> SELECT * FROM GV$SQL_MONITOR WHERE sql_id=' ...

  9. [1.1]Environment preset on a Windows server

    1. Python 3.5.1 (also on your personal computer) 2. Django 1.10.1 (also on your personal computer) 3 ...

  10. cdoj 1246 每周一题 拆拆拆~ 分解质因数

    拆拆拆~ Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1246 Descri ...