每日一节------文件的预览

Blob

文件的几种转换方式

1. Blob 转为 File

	new File([blob], filename);

2. File 转为 Blob

先将 File 转为 DataUrl,再将 dataURL 转为 Blob。
a. new FileReader().readAsDataUrl(),将 File 转为 DataUrl
b. 将 dataUrl 转为 blob

	let arr = dataUrl.split(',')
	// 对 base-64 编码的字符串进行解码
    let data = window.atob(arr[1])
    let mime = arr[0].match(/:(.*?);/)[1]
    // 创建无符号的 8 位整形数组
    let ia = new Uint8Array(data.length)
    for (var i = 0; i < data.length; i++) {
      // 码点代理对的第一个编码单元
      ia[i] = data.charCodeAt(i)
    }
    this.blob = new Blob([ia], {type: mime})

File

File 对象是特殊类型的 Blob

1. FileReader

特点

异步读取文件（File）或者数据(Blob)。不能简单的根据文件路径进行文件的读取，如果要实现该功能，需要通过 ajax 读取服务端的文件内容。

可读取的对象

1. File
2. Blob
3. DataTransfer
4. HTMLCanvasElement

使用示例

1. 先通过 new 关键字创建一个 fileReader 对象
2. 通过 fileReader.readAsDataUrl(File/Blob)读取文件内容，当文件读取完毕后，会执行 fileReader.onload 方法，此时也会将读取的文件 data 作为参数传递给 onload 方法。

方法

以下方法的入参：二进制对象(Blob类型 或 File类型)

1. readAsDataUrl(file)：包含一个data:URL格式的字符串（base64编码）以表示所读取文件的内容
2. readAsBinaryString(blob): 读取文件原始二进制
3. readAsArrayBuffer()：所读取文件的数据
4. readAsText(): 根据特殊的编码格式转化为内容(字符串形式)

2. 对象 URL

1. 特点

通过 window.URL.createObjectURL() 方法创建一个引用任何数据的唯一 URL 字符串。每个创建了的对象URL必须要释放。当文档关闭时，它们会自动被释放。如果你的网页要动态使用它们，你需要显式调用 window.URL.revokeObjectURL()来释放。

3. DataTransfer

1. Drag

如何使一个元素接收 drop 事件？

    let dropbox = document.getElementById("r-result");
    dropbox.addEventListener("dragenter", dragenter, false);
    dropbox.addEventListener("dragover", dragover, false);
    dropbox.addEventListener("drop", drop, false);
    
    function dragenter(e) {
        e.stopPropagation();
        e.preventDefault();
    }

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

    // 主要实现 drop 函数
    function drop(e) {
        e.stopPropagation();
        e.preventDefault();
        const files = e.dataTransfer.files;
    }

2. dataTransfer 是什么

DataTransfer 对象用于保存拖拽并放下（drag 和 drop）过程中的数据。这个对象可以从拖拽事件的 dataTransfer 属性上获取到。

3. 属性

dataTransfer.files： 包含数据传输中可用的所有本地文件的列表。如果拖动操作不涉及拖动文件，则此属性为空列表。

4. 示例

1. 实现拖拽预览函数

	function handleUpload(files) {
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /^image\//;

            if (!imageType.test(file.type)) {
                continue;
            }

            var img = document.createElement("img");
            img.classList.add("obj");
            img.file = file;
            dropbox.appendChild(img); // 假设"preview"就是用来显示内容的div

            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
   		}
	}

2. 用对象 URL 实现 PDF 预览

	const obj_url = window.URL.createObjectURL(blob);
    const iframe = document.getElementById('viewer');
    iframe.setAttribute('src', obj_url);
    window.URL.revokeObjectURL(obj_url);

注意点：PDF 等文件需要的是 Blob 对象。图片等可以是 File 对象。

4. FileList