因为我现在拿到的一个功能是上传时过滤掉很大尺寸的图片,所以需要来拿到上传时选择图片的size,所以有了这篇博文

不多说 上代码

$('input').change(function(e){

 1️⃣、console.log(e)==>得到的是什么呢

  得到的是:下面这些

  1. altKey:undefined
  2. bubbles:true
  3. cancelable:false
  4. ctrlKey:undefined
  5. currentTarget:input
  6. data:null
  7. delegateTarget:input
  8. detail:undefined
  9. eventPhase:2
  10. handleObj:Object
  11. isDefaultPrevented:h()
  12. jQuery22007808826687871413:true
  13. metaKey:undefined
  14. originalEvent:Event
  15. relatedTarget:undefined
  16. shiftKey:undefined
  17. target:input
  18. timeStamp:3956.0400000000004
  19. type:"change"
  20. view:undefined
  21. which:undefined
  22. __proto__:Object      

2️⃣、console.log(e.target)又会得到什么呢?

  得到的是input对象<input type="file" multiple="multiple" style="top: 91px; left: 44px; position: absolute; opacity: 0; z-index: 1000;">

3️⃣、console.log(e.target.files)呢,得到的又是什么呢?

  得到的是一串filelist

  1. FileList
    1. length:0
    2. __proto__:FileList

4️⃣、console.log(e.target.files[0])又能得到什么呢

  得到的是第一张input选择的图片的一些参数,得到的这些参数可以根据自己的需要提取,比如我现在需要的是size参数,e.target.files[0].size就可以拿到了,得到的单位是b哈

  1. File
    1. lastModified:1478486422000
    2. lastModifiedDate:Mon Nov 07 2016 10:40:22 GMT+0800 (CST)
    3. name:"222.jpg"
    4. size:124996
    5. type:"image/jpeg"
    6. webkitRelativePath:""
    7. __proto__:File

})

继续加油,一步一步

e.target.files[0]层层剖析的更多相关文章

  1. 《Netty5.0架构剖析和源码解读》【PDF】下载

    <Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的 ...

  2. 在使用document.getElementById('xxx').files[0]时,关于计算图片大小

    在使用文件上传属性时,一直好奇图片上传的大小时如何计算的,最近在使用中认识到的计算方式:  首先,图片大小的存储基本单位是字节(byte).每个字节是由8个比特(bit)组成.所以,一个字节在十进制中 ...

  3. chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同

    chrome 和IE 上传的文件,在net 后台取值Request.Form.Files[0].FileName 的不同 chrome 获得的是不含路径的纯文件名 IE获得的是含路径的文件名

  4. com.jcraft.jsch.JSchException: java.io.FileNotFoundException: file:\D:\development\ideaProjects\salary-card\target\salary-card-0.0.1-SNAPSHOT.jar!\BOOT-INF\classes!\keystore\login_id_rsa 资源未找到

    com.jcraft.jsch.JSchException: java.io.FileNotFoundException: file:\D:\development\ideaProjects\sala ...

  5. $('xx')[0].files[0]

    ①首先得明白jQuery对象只能使用jQuery对象的属性和方法,JavaScript对象只能使用JavaScript对象的属性和方法: ②files[0]是JavaScript的属性: ③$('xx ...

  6. 干货|漫画算法:LRU从实现到应用层层剖析(第一讲)

    今天为大家分享很出名的LRU算法,第一讲共包括4节. LRU概述 LRU使用 LRU实现 Redis近LRU概述 第一部分:LRU概述 LRU是Least Recently Used的缩写,译为最近最 ...

  7. vue2.0细节剖析

    1.样式切换 单个切换样式 /*html部分*/ <div class="bg" v-bind:class="{active:isActive}"> ...

  8. 服务网格数据平面的关键:层层剖析Envoy配置

    Envoy是一种高性能C++分布式代理,专为单个服务和应用程序设计.作为Service Mesh中的重要组件,充分理解其配置就显得尤为重要.本文列出了使用Envoy而不用其他代理的原因.并给出了Env ...

  9. 由上而下层层剖析细说PCI+ExpresS+11新版精髓

    https://wenku.baidu.com/view/9a16c41fa300a6c30c229f87.html

随机推荐

  1. layout

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 【源码】谷歌代理~WPF简单小软件-2015-10-15首发 (2016-03-01已更新源)

    蛋疼,昨天把代理去了后才发现,原来咱们连谷歌应用都访问不了,,,用别人的总觉得不怎么安全,然后今天早上就编了个小软件干掉他这限制==>  GoogleProxy.exe [主要目的:为了能在线安 ...

  3. jQuery源码分析系列(36) : Ajax - 类型转化器

    什么是类型转化器? jQuery支持不同格式的数据返回形式,比如dataType为 xml, json,jsonp,script, or html 但是浏览器的XMLHttpRequest对象对数据的 ...

  4. js实现匀速运动及透明度动画

    1.html代码 <body> <div id="container"> <span id="btn"></span& ...

  5. 升级 Visual Studio 2015 CTP 5 的坑、坑、坑

    前两天,微软发布了 Visual Studio 2015 CTP 5,全称为 Visual Studio 2015 Community Technology Preview 5,意为社区技术预览版,之 ...

  6. 小菜学习Winform(五)窗体间传递数据

    前言 做项目的时候,winfrom因为没有B/S的缓存机制,窗体间传递数据没有B/S页面传递数据那么方便,今天我们就说下winfrom中窗体传值的几种方式. 共有字段传递 共有字段传递实现起来很方便, ...

  7. canvas学习和面向对象(二)

    Canvas 学习(二) 上一篇Canvas 学习(一)中我是用canvas绘制了一些基本和组合的图形. 现在开始绘制图片和动画帧,以及面向对象的升级版本. 还是一样,看代码,所有的代码都托管在git ...

  8. 纪念我曾经的 JAVA 姿势--转

    原文地址:https://segmentfault.com/a/1190000007122432?hmsr=toutiao.io&utm_medium=toutiao.io&utm_s ...

  9. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  10. Solr学习总结(六)SolrNet的高级用法(复杂查询,分页,高亮,Facet查询)

    上一篇,讲到了SolrNet的基本用法及CURD,这个算是SolrNet 的入门知识介绍吧,昨天写完之后,有朋友评论说,这些感觉都被写烂了.没错,这些基本的用法,在网上百度,资料肯定一大堆,有一些写的 ...