文件上传

基础系列文章：https://segmentfault.com/a/1190000019940561 (opens new window)

文件上传的三种方案

方案一：经典的 form 和 input 上传

设置 form 的 aciton 为后端页面，enctype="multipart/form-data"，type=‘post’

form 表单提交操作网页会造成整体刷新

• 优点：

使用简单方便，兼容性好，基本所有浏览器都支持。

• 缺点：

  1. 提交数据后页面会跳转（ifrmae 可禁止页面跳转）。

  2. 因为是浏览器发起的请求，不是一个 ajax，所以前端无法知道什么时候上传结束。

  3. form 表单里发送除文件外的数据，一般是新建一个 type=hidden 的 input，value=‘需要传的数据’，每发送一个数据就需要一个 input，一旦多了就会使得 dom 看起来比较冗余。

方案二：使用 formData 上传

用 js 构造 form 表单的数据，简单高效，但最低只兼容 IE10，所以需要兼容 IE9 的童鞋们就略过这个方法吧。

var formData = new FormData();
formData.append("userid", userid);
formData.append("signature", signature);
formData.append("file", file); //file是blob数据
//再用ajax发送formData到服务器即可，注意一定要是post方式上传

• 优点：

由于这种方式是 ajax 上传，可以准确知道什么时候上传完成，也可以方便地接收到回调数据。

• 缺点：

兼容性差

方案三：使用 fileReader 读取文件数据进行上传。

HTML5 的新 api，兼容性也不是特别好，只兼容到了 IE10。

var fr = new FileReader();
fr.readAsDataURL(file);
fr.onload = function(event) {
  var data = event.target.result; //此处获得的data是base64格式的数据
  img.src = data;
  ajax(url, { data }, function() {});
};

上面获得的 data 可以用来实现图片上传前的本地预览，也可以用来发送 base64 数据给后端然后返回该数据块对应的地址。

• 优点：

可以准确知道什么时候上传完成，也可以方便地接收到回调数据。

• 缺点：

一次性发送大量的 base64 数据会导致浏览器卡顿，服务器端接收这样的数据可能也会出现问题。

文件上传格式

文件上传基础

onprogress 上传进度

xhr.abort() 终止上传

拖拽上传

1. 定义一个允许拖放文件的区域 div.drop-box

2. 取消 drop 事件的默认行为 e.preventDefault();，不然浏览器会直接打开文件

3. 为拖拽区域绑定事件,鼠标在拖拽区域上 dragover, 鼠标离开拖拽区域 dragleave, 在拖拽区域上释放文件 drop

4. drop 事件内获得文件信息 e.dataTransfer.files

剪切板上传

1. 页面内增加一个可编辑的编辑区域 div.editor-box,开启 contenteditable

2. 为 div.editor-box 绑定 paste 事件

3. 处理 paste 事件，从 event.clipboardData || window.clipboardData 获得数据

4. 将数据转换为文件 items[i].getAsFile()

5. 实现在编辑区域的光标处插入内容 insertNodeToEditor 方法

多文件上传

input file 标签开启 multiple

文件夹上传

其它

作者：joker1148 链接：https://www.nowcoder.com/discuss/610962?source_id=discuss_experience_nctrack&channel=-1 来源：牛客网

所以就介绍了一下文件上传的过程 问题： 如何分片，为什么分 100 片 除了分片还有什么其他的方法，有没有去了解过其他方法，有没有调研并比较过 后端主要做了什么工作 有没有在服务器和客户端都试了一遍