file API

  客户端直接接见用户计算机的文件,2000之前,在表单添加了<input type="file">字段.  
  file API是为给web开辟供应平安的体式格局,以便在客户端更好接见用户的文件,字段的基础上加
了一些直接接见文件信息的接口-files鸠合.与fileReader范例读取文件的数据.

files鸠合

name: 当地文件的称号  
size: 文件的字节大小  
type: 字符、文件的MIME范例  
lastModifiedDate: 文件上次修正的时候(chrome完成了这属性)

fileReader范例

    readAsText(file, encoding): 以纯文本的体式格局读取文件.
    readAsDataURL(file): 读取文件并以URL的情势保存在result属性中.  
    readAsBinaryString(file): 读取文件并将一个字符串将保存在result属性中,一个字符
为一个字节.
    readAsArrayBuffer(file): 读取文件并将一个包括文件内容的ArrayBuffer保存在
result属性中.  
    (file-文件鸠合; encoding-编码范例)

事宜

    因为数据是异步读取.因而fileReader供应了几种事宜.
    progress事宜: 每～50ms,便触发一次.
    error事宜: 但文件没法读取就会触发,有个属性error.code属性.1示意未找到文件,2示意
平安性毛病,3示意读取中缀,4示意文件不可读,5示意编码毛病.  
    load事宜: 触发但文件完全读取后.
    中缀了还会触发abort事宜,在load、error事宜后还会触发loadend事宜.

栗子

当用户上传完图片以后,可在页面马上显现.

//html
<label for="file">
    <input type="file" name="file" id="file" accept="image/*">
    <span id="output"></span>
</label>
//js
function showFileImg(ele, dist){
    const filesList = document.querySelector(ele);
    const output    = document.querySelector(dist);
    
    filesList.addEventListener('change', function(event) {
        //实例fileReader对象
        const reader = new FileReader();
        //猎取文件鸠合
        let files  = event.target.files[0];
       
        if(/image/.test(files.type)){
            //读取文件并经由过程URL类保存在result里
            reader.readAsDataURL(files);
            //事宜
            reader.onload = function(){
                //取得图片数据并插进显现节点
                let html = '<img src=' + reader.result + '>';
                output.innerHTML = html;
            }
            
        } else {
            return false;
        }
    });
}
const fileImgA = new showFileImg('#file', '#output');

读取拖放文件,在建立自定义的位置,当用户把文件拖放进自定义位置后,显现文件信息.

//html
<div id="drop_zone">Drop files here</div>
<output id="output"></output>

//js
function dropFile() {
    const droptarget = document.querySelector('#drop_zone');
    const output     = document.querySelector('#output');
    //文件信息
    let info         = '';
    
    function handleEvent(event) {
        event.preventDefault();
        
        let files, i, len;
        if(event.type == 'drop') {
            let files = event.dataTransfer.files;
            let i     = 0;
            let len   = files.length;
            //遍历文件比放入显现节点
            while(i < len){
                info += files[i].name + '(' + files[i].type + ',' + files[i].size + ')<br/>'
                i++;
            }
            output.innerHTML = info;
        }
    } 

    droptarget.addEventListener('dragenter', handleEvent);
    droptarget.addEventListener('dragover', handleEvent);
    droptarget.addEventListener('drop', handleEvent);
}
dropFile();

运用XHR上传文件

//html
<label for="file">
    <input type="file" name="file" id="file">
</label>
<button id="sendFile">提交</button>

//js
function xhrFile(){
    const file     = document.querySelector('#file');
    const sendFile = document.querySelector('#sendFile');
    
    //文件信息
    let files;
    
    //取得文件信息
    function getFileInfo(event){
        let files = event.target.files[0];
    };
    //发送xhr
    function sendFileXhr(event){
        //实例对象
        let data = new FormData();
        let i    = 0;
        let len  = files.length;
        //遍历文件信息
        while(i < len){
            data.append('file' + i, files[i]);
            i++;  
        }
        //实例要求对象
        let xhr = new XMLHttpRequest();
        xhr.open('post', '......php', true);
        //要求胜利打印放回信息
        xhr.onreadystatechange = function() {
            if(xhr.readystate === 4){
                alert(xhr.responseText);
            }    
        }
        xhr.send(data);
    };
}
xhrFiles()

对象formData可经由过程键值模仿一系列的表单,经由过程xhr的send提交数据.

formdata append

new FormData(form? : HTMLFormElement);
给这对象加键值
append(name, value, filename);
name: 字段称号
value: 字段数值
filename: 文件的文件名(可选).