关于文件上传下载我所知道的全部内容

文件上传是一个很基础的内容,有很多的应用场景,但是前端各种库和框架实在是太便利了,根本不用了解到用原生的是怎么实现的,一遇到问题就各种懵逼,最近刚好经历了几种文件上传的需求,就以此来作为开年的第一篇分享

1. 表单上传

在AJAX还不流行的年代,表单上传文件是基本操作。表单上传文件很简单,有两个需要重点关注的属性:

1.1 enctype

属性用于设定form表单提交的时候数据编码方式,一共有三种参数选择:

  1. application/x-www-form-urlencoded 发送前编码所有字符
  2. multipart/form-data 不对字符进行编码
  3. text/plain 空格转换为+,但是不会对字符进行编码

如果想要使用文件上传,必须指定为第二个属性值:enctype=multipart/form-data

1.2 multiple

对于选择文件的时候如果想对文件进行多选,那么必须要设置

一个比较完整代码片段

2. AJAX上传

如果要实现页面不刷新的文件上传,有两种常用的方案: