今天在做图片上传的小功能,使用了一个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. hadoop2.6.0汇总:新增功能最新编译 32位、64位安装、源码包、API下载及部署文档

    相关内容: hadoop2.5.2汇总:新增功能最新编译 32位.64位安装.源码包.API.eclipse插件下载Hadoop2.5 Eclipse插件制作.连接集群视频.及hadoop-eclip ...

  2. maven 的各种命令

    mvn clean : 清理旧的文件 mvn clean compile :  清理 .编译 mvn clean test :       清理 .编译 .测试 mvn clean package : ...

  3. Zookeeper实现分布式选举算法

    分布式系统中经常采用Master/Slave架构.(截止到目前为止我还没有碰到过其他架构...)这种架构中如果Master发生故障就会导致整个集群停止服务,为了提高系统的高可用性通常采用选举算法来选出 ...

  4. Hibernate、Mybatis 通过数据库表反向生成java类和配置

    一.通过MyEclipse生成Hibernate类文件和hbm.xml文件,或者annotation文件    (转载孙宇老师的文章) 二.Mybatis生成实体类和配置文件: myeclipse下生 ...

  5. linux 下终端复用软件推荐——tmux

    使用过些linux终端,比如Tilda.Terminator. 之前最经常用的是Terminator,其可以上下左右分屏,比较方便,但其有个缺点是经常无故崩溃. 后来遇到Tmux,根据网上的设置配置了 ...

  6. HDU 4462 Scaring the Birds (暴力求解,二进制法)

    题意:给定一个 n*n的矩阵,在一些位置放上稻草人,每个稻草人的范围是一定,问你最少几个能覆盖整个矩阵. 析:稻草人最多才10个,所以考虑暴力,然后利用二进制法,很容易求解,并且时间很少0ms,注意有 ...

  7. WordPress主题制作教程[壹] - 了解WP&结构&索引

    最近开始筹备WordPress主题开发了.首先我们在此章节中进行了解什么是WP,以及WP的结构.通过这个文章索引到以后所写的WP系列教程. (抱歉,大家不要急,持续更新中....) 1.首先,我们来认 ...

  8. socket的shutdown与close

    shutdown原型 int shutdown(int socket, int how); socket 指定socket的文件描述符 how    指定shutdown的类型 SHUT_RD 禁止读 ...

  9. MFC拆分窗口及它们之间的数据交换(转)

    转自:http://blog.csdn.net/nuptboyzhb/article/details/7455471 源代码:http://download.csdn.net/detail/nuptb ...

  10. Swift学习笔记六

    集合类型(Collection Type) Swift提供三种主要的集合类型:数组(array).集合(set).字典(dictionary).数组是有序的值序列,集合是无序的值序列,字典是无序的键值 ...