表单多文件上传样式美化 支持选中文件后删除相关项

开发中会经常涉及到文件上传的需求，根据业务不同的需求，有不同的文件上传情况。

有简单的单文件上传，有多文件上传，因浏览器原生的文件上传样式及功能的支持度不算太高，很多时候我们会对样式进行美化，对功能进行完善。

本文根据一个例子，对多文件的上传样式做了一些简单的美化（其实也没怎么美化。。），同时支持选择文件后自定义删除相关的文件，最后再上传

文章篇幅较长，先简单看看图示：

目录

• 文件上传基础
  • 单文件上传
  • 多文件上传
• 表单文件上传的美化
• 选中文件后的删除
  • 界面的处理
  • 脚本的处理
    • FileList
    • FormData

一、文件上传基础

1. 单文件上传

最简单的文件上传，是单文件上传，form标签中加入enctype="multipart/form-data"，form表单中有一个input[type="file"]项

<form name="form1" method="post" action="/abc.php" enctype="multipart/form-data">  <input type="text" name="user" id="user" placeholder="请输入昵称">  <input type="file" name="userImage" id="userImage">  <input type="submit" name="sub" value="提交"></form>

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：表单多文件上传样式美化 支持选中文件后删除相关项

关键词：上传