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

jQuery文件输入事件详解
最新推荐文章于 2021-12-23 20:14:24 发布
转载 最新推荐文章于 2021-12-23 20:14:24 发布 · 4k 阅读 · 6
文章标签：

#event #target

本文详细介绍了使用jQuery处理文件输入事件的方法，包括如何获取事件对象、读取目标元素及所选文件的信息。通过实例展示了如何提取文件名、大小等属性。


$('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

})

弓长张帆
关注
./scripts/Makefile.clean 文件分析
雯辰的博客
05-23 1172
从上到下依次执行，伪目标PHONY在第8行和第91行可知，,目标__clean在74行定义了依赖和语句，在92行定义了依赖和语句，所以从这两个目标的依赖和语句可知，优先执行目标再执行目标__clean。
前端--文件上传--文件切片--利用FileReader()中的readAsDataURL()做缩略图--多文件上传--formData--切片上传实现
墨苒孤的博客
04-12 3042
前端最常见的就是添加一个multiple 属性，这样在上传的时候只要按住Ctrl 就可以选择多个文件了，这样的方式对用户不够友好，因为有些用户是不知道按住Ctrl 可以选择多个文件的，一般来说，用户只会一个文件，一个文件来上传的。图片可以通过转成Base64 的方式，文件一般使用 formData来进行传输，可以说，formData 就是一个载体，负责装载文件。//用户一个一个选择文件，直接push存储起来，符合用户习惯。//结合 multiple属性，可以上传多个文件，"文件大小不能超过10M"
e.target.files[0]层层剖析（应用from表单文件上传）
qq_43068016的博客
03-26 1011
$(‘input’).change(function(e){} 1️⃣、console.log(e)==>得到的是什么呢 得到的是：下面这些 altKey:undefined bubbles:true cancelable:false ctrlKey:undefined currentTarget:input data:null delegateTarget:input detail:und...
IE中文件选取方法执行两次，e.target.files[0]报错
山海一哥的博客
08-01 2051
<input type='file' @change="upload;"> 该upload方法在其他浏览器中可以通过e.target.files[0]正常上传，但是在IE中却报错，通过控制台查看发现该方法执行了两次，第二次的e.target.name错误，这为里不讨论为何会执行两次的问题，既然报错，就在于代码在一步步往下走的时候，走不下去了，那么我们只需要在他下一步报错之前退...
e.target.files[0] 解析
qq_45576618的博客
08-18 2911
转载： https://www.cnblogs.com/lwwen/p/6210126.html $(‘input’).change(function(e){ 1️⃣、console.log(e)==>得到的是什么呢 得到的是：下面这些 altKey:undefined bubbles:true cancelable:false ctrlKey:undefined currentTarget:input data:null delegateTarget:input detail:undefined e
idf.py set-target背后的路径机制揭秘：ESP-IDF版本切换原理全解析
`idf.py set-target` 是 ESP-IDF 构建系统中用于指定目标芯片（Target）的核心命令，它不仅声明了编译所面向的硬件平台（如 `esp32`、`esp32s3`），还触发一系列环境初始化操作。该命令通过解析目标芯片的架构特性...
深入解析Hisuite版本命名玄机：从10.1.0.550看懂华为工具链演进的8个里程碑
!... # 摘要 本文系统梳理了Hisuite工具的版本命名体系、技术演进路径及其与华为设备生态的协同发展历程。通过对版本号语义化结构和构建号生成逻辑的解析，揭示其背后持续集成的工程实践；从单体架构向模块化、插件化...
City_Road_Identification_Model\City_Road_Identification_Model.axf: Error: L6218E: Undefined symbol Wit_ParseByte (referred from serial.o).
最新发布
12-01
回复时应强调模块化检查思路：从头文件→源文件→编译配置层层递进，并提醒注意extern声明的正确用法（参考[2]的教训）。最后补充的硬件复位建议是因为某些传感器需要初始化序列，软件复位可避免冷启动问题。 针对 ...
T1program.zip配置文件深度分析：YAML_JSON运行时加载的4个隐藏陷阱与优化方案
本文系统研究了T1program.zip配置系统的加载机制与运行时行为，重点分析YAML与JSON配置文件的解析原理及常见问题，揭示了在动态加载过程中存在的四大隐藏陷阱，包括类型强制转换异常、键覆盖与循环引用、竞态条件...
FormData类型的event.target.files如何使用Postman进行接口测试
Clearlight's Blog
07-23 1221
<div class="filelist"> <input type="file" accept=".doc, .docx, .txt, .pdf" @change="getFile($event)" /> <button @click="submitForm($event)">提交</button> </div> getFile(event) { // eslint-di..
$('xx')[0].files[0]是什么意思，Ajax上传文件至springMVC的controller
热门推荐
zh123456zh789的博客
12-14 1万+
①首先得明白jQuery对象只能使用jQuery对象的属性和方法，JavaScript对象只能使用JavaScript对象的属性和方法； ②files[0]是JavaScript的属性； ③$('xx')是jQuery对象，$('xx')[0]是将jQuery对象：$('xx')转换为JavaScript对象，这样才可以使用JavaScript对象的属性和方法； ④我们再看这行代码的背景，H
获取上传文件的大小ele.files[0].size
zhaotengfei36520的专栏
09-24 9008
ele.files[0].size获取文件大小，第一次看见，记录下 function filesize(ele) { var filesize = (ele.files[0].size / 1024).toFixed(2); if(filesize > 5120){ alert("文件大于5M"); } }
java上传文件
德川家康
12-06 203
####上传文件 js处理 var file=e.target.files[0]; var reader=new FileReader(); reader.readAsDataURL(file,"UTF-8"); var fileStringBase64=""; reader.onload=fun...
input 详解之文件上传、new FormData()对象
muzidigbig的博客
11-27 1万+
通常的input组件表单提交时，按照form属性提交的其中enctype=”application/x-www-form-urlencoded”是默认值 post上传文件new Formdata() // 请求头-上传文设置 headers: { Accept: 'application/json, text/plain, */*', // 可选（根据具体情况设置） 'Content-Type': 'multipart/form-data' // 上传文件 必须
Web前端开发学习之路——数据的保存与读取（三）
创作星球
03-26 928
读取文本文件 HTML5搭配JavaScript就可以轻松读取文件的内容，并显示文件属性（例如大小、文件类型、创建日期）经常读取的文件是文本文件，下面将以读取文本文件来说明读取文件的方法。 选择文件 选择文件最简单的方式就是使用Input元素，只要将input元素的type属性指定为file，就能够轻轻松松地选择文件。语法如下： <input type ="file" name =...
用 TS 实现一个基本的文件上传
weixin_44184425的博客
12-23 3654
import React from 'react'; import axios from 'axios'; function App() { const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => { const files = e.target.files if (files) { const uploadedFile = files[0] const for
input 选取文件夹及多个文件 识别内部文件
cao_he_fei的博客
11-24 8305
input 选取文件夹 input 文件的选取 <input type="file" class="upfile" multiple="multiple" /> 可以选取多个文件 <input type="file" class="upfile" webkitdirectory /> 可以选择一个文件夹 拾取内部文件 change 事件 $fileInput.off().o
const file = e.target.files[0]
10-12
`const file = e.target.files[0]` 这行代码的作用是从事件对象 `e` 中获取用户选择的第一个文件。下面对这行代码进行详细解释： #### 事件对象 `e` 在 JavaScript 中，当一个事件（如 `change` 事件）触发时，会自动创建一个事件对象 `e`，这个对象包含了与该事件相关的信息，例如事件的类型、触发事件的元素等。在这个上下文中，`e` 是 `input` 元素的 `change` 事件触发时传递给事件处理函数的事件对象。 #### `e.target` `e.target` 是事件对象的一个属性，它指向触发该事件的 DOM 元素。在这个例子中，`e.target` 就是用户选择文件的 `<input>` 元素。通常，这个 `<input>` 元素的 `type` 属性被设置为 `file`，以允许用户选择文件。示例代码如下： ```html <input type="file" id="fileInput"> <script> const input = document.getElementById('fileInput'); input.addEventListener('change', function(e) { // e.target 就是这个 input 元素 }); </script> ``` #### `e.target.files` `e.target.files` 是 `<input type="file">` 元素的一个属性，它是一个类数组对象（`FileList` 类型），包含了用户选择的所有文件。如果用户选择了多个文件，`e.target.files` 中就会包含多个 `File` 对象；如果只选择了一个文件，`e.target.files` 中就只有一个 `File` 对象。示例代码如下： ```html <input type="file" id="fileInput" multiple> <script> const input = document.getElementById('fileInput'); input.addEventListener('change', function(e) { // e.target.files 包含用户选择的所有文件 console.log(e.target.files); }); </script> ``` #### `e.target.files[0]` `e.target.files[0]` 表示 `FileList` 对象中的第一个文件。由于 `FileList` 是类数组对象，可以通过索引来访问其中的元素，索引从 0 开始。因此，`e.target.files[0]` 就是用户选择的第一个文件，它是一个 `File` 对象，包含了文件的相关信息，如文件名、文件大小、文件类型等。示例代码如下： ```html <input type="file" id="fileInput"> <script> const input = document.getElementById('fileInput'); input.addEventListener('change', function(e) { const file = e.target.files[0]; if (file) { console.log('文件名:', file.name); console.log('文件大小:', file.size); console.log('文件类型:', file.type); } }); </script> ``` 综上所述，`const file = e.target.files[0]` 这行代码的作用是从用户选择的文件列表中获取第一个文件，并将其赋值给变量 `file`，以便后续对该文件进行处理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值