File

web_APIs

使用 File API 让用户选择本地文件，然后读取这些文件，使用 <input type="file"> 或是拖拽选择本地文件。

选择多个文件

multiple 属性可让用户选择多个文件：

<input type="file" id="fileInput" mutiple>

获取已选择的 files

对于一个文件选择框：

<input type="file" id="fileInput">

通过其 files 属性获取一个 FileList 对象：

const seletedFiles = document.getElementById('fileInput')
const firstFile = seletedFiles[0]

在 onchenge 中获取

onchange 事件处理函数传入 this.files 作为参数：

// 注意属性是字符串
<input type="file" id="fileInput" onchange="handleFiles(e)">

使用 addEventListener 添加 onchange 事件处理函数：

function handleFiles(e) {
    // ...
    const fileList = this.files
}
const inputElem = document.getElementById('fileInput')
inputElem.addEventListener("change", handleFiles, false)

获取 FileList 内文件的属性

每个 file 对象具有以下属性：

• name
  只读的字符串文件名。
• size
  只读的 64 位整数字节。
• type
  只读的 MIME 类型字符串。

在另一处触发隐藏的选择输入框

将输入框设置 display:none，然后在自己定义的 API 上调用输入框的 click() 方法来触发。

或者使用 <label for="fileInput">。 元素

如果是 a 标签记得取消默认行为。

使用拖拽

同理，先创建一个可拖拽区域，然后调用 click() 函数：

var dropbox;
dropbox = document.getElementById('dropbox');
dropbox.addEventListener('dragenter', dragenter, false);
dropbox.addEventListener('dragover', dragover, false);
dropbox.addEventListener('drop', drop, false);

添加 dragenter、dragover、drop 事件处理函数：

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}
function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}
// 重点
function drop(e) {
    e.stopPropagation();
    e.preventDefault();
    // DragEvent.dataTransfer 属性
    // 包含 drag 操作的数据对象
    var dt = e.dataTransfer;
    var files = dt.files;
    handleFiles(files);
}

FlieReader

FileReader 对象允许 web 应用异步读取文件（File 对象或者 Blob 对象）:

// 创建
const reader = new FileReader();
reader.readAsDataURL(file);

属性

• FileReader.error
  发生的错误。
• FileReader.result
  文件的内容，在读取完成后才可读，数据的格式取决于读取的方法。
• FileReader.readyState
  
  • 0 还没有加载任何数据
  • 1 正在加载
  • 2 完成

事件处理

• FileReader.onload
  处理 load 事件。读取完成时触发。
• FileReader.onabort
  处理 abort 事件。读取中断时触发。
• FileReader.onprogress
  处理 progress 事件。在读取 Blob 时触发。

方法

• FileReader.abort
• FileReader.readAsArrayBuffer
• FileReader.readAsBinaryString
• FileReader.readAsDataURL
• FileReader.readAsText

例子：显示用户选择的图片的缩略图

function handleFiles(files) {
    var preview = document.getElementById('preview');
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var imgType = /^image\//;
        if(!imgType.test(file.type)) continue;
        var img = document.createElement('img');
        img.classList.add('obj');
        // file 属性使 img 具有一个 File 对象
        // 用以拿到稍后需要实际上传的图片文件
        img.file = file;
        preview.appendChild(img);
        var reader = new FileReader();
        // fileReader.result 返回文件的内容
        // 格式取决于读取方法
        // 这里返回 data:URL
        reader.onload = ((aImg) => {return function(e){aImg.src = e.target.result}})(img);
        // 在后台开始读取 file
        reader.readAsDataURL(file)
    }
}

使用 Object URL

使用 window.URL.createObjectURL() 方法创建用来引用某数据的 URL 字符串：

var objectURL = window.URL.createObjectURL(fileObj);

使用完后必须使用 window.URL.revokeObjectURL(objectURL) 释放引用！

上传一个用户选择的文件

上例缩略图中，img 的 file 属性保存了所有图片的 file 对象（不然要重新获取）：

function sendFiles() {
    var imgs = document.querySelectorAll('.obj');
    for (var i = 0; i < imgs.length; i++) {
        new FileUpload(imgs[i], imgs[i].file);
    }
}
function FileUpload(img, file){
    var reader = new FileReader();
    // canvas，加载的 loading 背景
    this.ctrl = createThrobber(img);
    var xhr = new XMLHttpRequest();
    this.xhr = xhr;
    var self = this;
    this.xhr.upload.addEventListener('progress', function(e){
        if (e.lengthComputable) {
            var precentage = Math.round((e.loaded * 100) / e.total);
            self.ctrl.update(percentage);
        }
    }, false);
    xhr.upload.addEventListener('load', function(e) {
        self.ctrl.update(100);
        var canvas = self.ctrl.ctx.canvas;
        canvas.parentNode.removeChild(canvas);
    }, false);
    xhr.open("POST", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php");
    xhr.overrideMimeType('text/plain; charset=x-user-defined-binary');
    reader.onload = function(evt) {
        xhr.send(evt.target.result);
    };
    reader.readAsArrayBuffer(file);
}

1. 在 FileUpload 函数内编写 XHR 对象的内容和上传处理函数（onprogress、onload）。
2. 使用一个 FileReader 读取 file，再上传读取完成后的 ArrayBuffer。