浏览器文件上传浅淡

Posted 2020-11-06 无梦灬

浏览器文件上传浅淡

form 表单的各种格式

在出现 ajax 之前，前端是使用 form 表单进行提交数据的，它的结构大概是这样：

<form>
  <input type="text" name="username"/>
  <button type="submit">提交</button>
</form>

在 form 表单进行提交时，则支持有四种方式（来自：https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files）：
application/x-www-form-urlencoded, text/plain, multipart/form-data, GET 方式即 URL 传参。

1. GET 类请求

其内容是添加到 URL 的 query 部分的：

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

1. application/x-www-form-urlencoded

POST 方式进行传输与 GET 类似内容时，其数据可放在 body 内，application/x-www-form-urlencoded
方式内保证数据格式与普通的 GET 方式类似：

Content-Type: application/x-www-form-urlencoded

foo=bar&baz=The+first+line.%0D%0AThe+second+line.%0D%0A

1. multipart/form-data
   这种方式是支持传输其他类型的数据，比如文件或者 blob 类型数据。
   其格式如下：

------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name="外卖测试.png"; filename="Pictures/aa.png"
Content-Type: image/png


------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name=".localized"; filename="Pictures/.localized"
Content-Type: application/octet-stream


------WebKitFormBoundaryKnsKCAS4s0kSeNQ3
Content-Disposition: form-data; name="start.png"; filename="Pictures/start.png"
Content-Type: image/png


------WebKitFormBoundaryKnsKCAS4s0kSeNQ3--

它的主要结构是以分界符进行分隔，每个分界符后面带有 \r\n，最后一个分界符会多个 --，表示数据传输结束。
它在服务端的解析可以参考 https://blog.csdn.net/shmnh/article/details/49012417

input[type=file] 的一些属性

<input type="file"/>

和其他类型的 input 相同，事件都是比较类似的。获取值的方式为添加 change 事件即可。
除此之外，还支持几个常用的属性

• multiple 多选属性，可进行多选
• webkitdirectory 选择文件夹功能，注意该属性只支持 chrome 和 firefox
• accept 设置选择文件的类型，比如 ‘image/*‘, 支持图片类型等

在 change 事件中，可以从 e.target.files 获取，它是个伪数组，可用 slice 转换为真正的数组。
内部结构大概如下：

lastModified: 1519638407937,
lastModifiedDate : Mon Feb 26 2018 17:46:47 GMT+0800 (CST) 
name: "aaa.png"
size: 1222046
type: "image/png"
webkitRelativePath: "Pictures/外卖测试.png"

这些参数都是比较有用的参数，利用它们可以实现各种复杂的功能。

实现文件上传

iframe + form

普通 form 实现其中有最大的问题是表单提交后，页面会进行跳转，为了解决这个问题，将 form 的 target 设置为一个隐藏的 iframe，
保证调用完成 submit 后仍旧可停留当前页面

<form action="/api/upload" target="empty-iframe" enctype="multipart/form-data" method="POST">
  <input name="file" type="file" multiple webkitdirectory="" />
  <button type="submit">提交</button>
</form>

<iframe src="" name="empty-iframe" frameborder="0" style="width: 100%;min-height: 400px;"></iframe>

FormData

由于 IE10 后支持了 FormData 对象，这样我们提交数据就很方便了。FormData 使用方法是：

const xhr = new XMLHttpRequest()
const form = new FormData()
form.append(key, data)
form.append(file.name, file.file)
xhr.open(‘post‘, action, true)
xhr.send(form)

实现起来就很简单了

图片本地展示

在有些情况下，可能在上传要前展示本地的图片，所以我们需要读取文件。通用的一种方法是使用 URL.createObjectURL，
当然，该方法还是处于草案阶段，但浏览器已经基本支持了。它会生成了一个以 blob:// 开头的地址，指向一个浏览器创建的临时地址。
这样相当于直接网络读取。

对于一些小的图片也可以先进行读取后展示，比如我们知道图片是支持 base64 的方式的，那么我们就可以将图片转为 base64 方式进行读取。
如下例使用 FileReader 进行读取为 base64, 并进行 md5 校验：

const reader = new FileReader()
reader.onload = function (e) {
  dataPicList.querySelector(‘#id-‘ + uid).src = e.target.result
  const spark = new SparkMD5()
  spark.append(e.target.result)
  const hexHash = spark.end()
  console.log(hexHash)
}
reader.readAsDataURL(file)

当然，对 base64 获取的 md5 会与二进制的不同，同时对于大文件读取至内存再处理会有诸多问题，这些都是可以考虑的一个方向。

本文中实践的示例在：https://github.com/wenlonghuo/code-test/tree/master/005_upload