e.target.files[0]层层剖析

因为我现在拿到的一个功能是上传时过滤掉很大尺寸的图片,所以需要来拿到上传时选择图片的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

})

继续加油,一步一步??

时间: 2024-10-26 02:34:16

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

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

<Netty5.0架构剖析和源码解读>[PDF]下载链接: https://u253469.pipipan.com/fs/253469-230062545 内容简介 Netty 是个异步的事件驱动网络应用框架,具有高性能.高扩展性等特性.Netty提供了统一的底层协议接口,使得开发 者从底层的网络协议 (比如 TCP/IP. UDP) 中解脱出来. 就使用来说, 开发者只要参考Netty 提供的若干例子和它的指南文档,就可以放手开发基于 Netty 的服务端程序了. 在Java 社区,最知名的

单例模式—层层剖析寻找最高效安全的单例

问题来源 什么是单例?它的运用场景是什么? 单例模式是指保证在系统中只存在某类唯一对象.运用场景随处可见,例如工具类.Spring容器默认new对象等. 单例模式有几种实现方式? 饿汉式.懒汉式.双重检查锁式.内部类式. 推荐使用方式? 饿汉式.内部类式. 饿汉式 饿汉式顾名思义饿,那么当应用程序一开始类加载,类的对象立马实例化加载至JVM. 1 public class SingletonClass { 2 /** 3 * 优点:调用效率高. 4 * 缺点:没有延迟加载. 5 */ 6 pri

自己写的文件上传files

做法: 本地图片上传后,把上传的图片转为base64,和表单数据一起提交 成品: <el-form-item label="公司LOGO" prop="url"> <el-image v-if="this.isDisabled" style="width: 114px; height: 114px" :src="formShow.logoImg" class="img-avata

HTML5图片预览

作者:Snandy 两种方式实现 URL FileReader 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 <!DOCTYPE HTML> <html>     <head>     <meta charset="utf

上传图片显示缩略图

<script>function veriFormat(val){ var strMrt = val.val().split(".")[val.val().split(".").length - 1]; if(strMrt){ ext = strMrt.toUpperCase(); if(ext!="BMP"&&ext!="PNG"&&ext!="GIF"&

HTML5预览本地图片

以http协议开头的url的网页,即服务器上的网页是不能显示计算机本地图片的,如果想查看本地图片但不使用服务端的上传功能,可以使用html5的fileReader实现. <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>html5预览本地图片</title> </head> <style type="text/css&

通过 File API 使用 JavaScript 读取文件

原文地址:http://www.html5rocks.com/zh/tutorials/file/dndfiles/ 简介 HTML5 终于为我们提供了一种通过 File API 规范与本地文件交互的标准方式.为了举例说明其功能,可使用 File API 在向服务器发送图片的过程中创建图片的缩略图预览,或者允许应用程序在用户离线时保存文件引用.另外,您可以使用客户端逻辑来验证上传内容的 mimetype 与其文件扩展名是否匹配,或者限制上传内容的大小. 该规范通过“本地”文件系统提供了多种文件访

mui 常见的效果

上传图片,预览图片: <!--upload--> <div id="feedback" class="mui-page feedback"> <div class="mui-page-content"> <div id='image-list' class="row image-list"> <div class="image-item space"&g

HTML5实现图片预览功能

两种方式实现 URL FileReader Index.jsp文件 <%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">