File Input多次添加文件,动态删除文件,用来实现上传等操作

本文介绍了如何在网页中实现在file input元素上动态添加和删除文件,以满足文件上传需求。通过获取FileList对象并对其进行操作,可以实现文件列表的动态更新。核心在于理解FileList是类数组对象,并将其转换为数组以便进一步处理。
摘要由CSDN通过智能技术生成

1.需求图示

实现

2.按图索骥

  • 添加 实际上,添加附件就是<input type="file" id="myFile">的控件,var fileList = getElementById(myFile).files就可以得到选择的文件的FileList对象,这个对象是类数组的对象(含义有点像函数参数arguments)。记住这一点很重要。

  • 显示 下面的显示文件名的面板根据上传的文件名name显示

3.刨根问底

  • FileList类数组对象
    console.log(fileList)打印出来的结果显示:
    bash
    FileList
    0:File
    lastModified:1446204650848
    lastModifiedDate:Fri Oct 30 2015 19:30:50 GMT+0800 (中国标准时间)
    name:"CCGIS.png"
    size:809542
    type:"image/png"
    webkitRelativePath:""
    __proto__:File
    length:1
    __proto__:FileList

    思考:我们只需要能动态修改fileList即可,第一想法是将它
  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值