input单文件上传

accept字段表示可选择的文件的MIME类型。

<input id="uploadFile" type="file" accept="image/*" />

input多文件上传

<input id="uploadFile" type="file" accept="image/*" multiple />

input文件夹上传

<input id="uploadFile" type="file" accept="image/*" webkitdirectory />

拖拽上传

监听drop、dragenter、dragover、dragleave事件。

移除默认行为

["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
  dropAreaEle.addEventListener(eventName, preventDefaults, false);
  document.body.addEventListener(eventName, preventDefaults, false);
});

function preventDefaults(e) {
  e.preventDefault();
  e.stopPropagation();
}

监听drop事件，获取事件对象的dataTransfer属性上的files属性，拿到拖拽的文件File类型。

将File类型转成base64用img标签进行预览。

function handleDrop(e) {
  const dt = e.dataTransfer;
  const files = [...dt.files];
  files.forEach((file) => {
    previewImage(file, imgPreviewEle);
  });
  // 省略文件上传代码
}

function previewImage(file, container) {
  if (IMAGE_MIME_REGEX.test(file.type)) {
    const reader = new FileReader();
    reader.onload = function (e) {
      let img = document.createElement("img");
      img.src = e.target.result;
      container.append(img);
    };
    reader.readAsDataURL(file);
  }
}

剪切板上传（不支持本地文件）

浏览器支持copy和cut，但不支持文件paste。

支持网页图片paste。

navigator.clipboard获取剪切板信息。也可以通过paste事件的e.clipboardData获取。

分块上传

Blob.slice方法对大文件按照指定的大小进行切割，然后通过多线程进行分块上传，等所有分块都成功上传后，再通知服务端进行分块合并