21|新兴API

01|requestAnimationFrame

(function(){
    function draw(timestamp){
        // 计算两次重绘的时间间隔
        let drawStart = (timestamp || Date.now()),
        diff = drawStart - startTime;

        // 使用diff确定下一步的绘制时间

        // 把startTime重写为这一次的绘制时间
        startTime = drawStart;

        // 重绘UI
        requestAnimationFrame(draw);
    }

    let requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
    startTime = window.mozAnimationStartTime || Date.now();
    requestAnimationFrame(draw);
})();

02|File API

//通过监听change事件并读取files集合，就可以知道每个文件信息
fileList.addEventListener("change", function(event){
    var files = event.target.files,
    i=0,
    len = files.length;
    while(i<len){
        console.log(files[i].name, files[i].type, files[i].size);
        i++;
    }
}, false);

// FileReader类型
 reader = new FileReader();
while(i<len){
    // reader.readAsDataURL(files[0]);
    reader.readAsText(files[0]);
    // reader.readAsBinaryString(files[0]);
    //reader.readAsArrayBuffer(files[0]);

    // 由于读取是异步的，所以支持load,error,progress等事件，progress在当读取了新数据是触发，每50ms触发一次
    // 触发error事件时会将相关信息保存在error属性中，该属性保存了一个对象，只有一个属性code, 1表示未找到文件，2表示安全性错误，3表示读取中断，4表示文件不可读
    reader.onload = function(){
        // 读取结果存在result属性中
        console.log(reader.result);
    }
    // 如果想中断读取，可以调用absort()方法，此时会触发loadend事件

    // console.log(files[i].name, files[i].type, files[i].size);
    i++;
}

// 读取部分内容--file对象支持slice属性
function blobSlice(blob, startByte, length){
    // blob为文件对象，startByte为起始字节，length为要读取的字节数
    if(blob.slice){
        return blob.slice(startByte, length)
    }else if(blob.webkitSlice){
        reutrn blob.webkitSlice(startByte, length)
    }else if(blob.mozSlice){
        return blob.mozSlice(startByte, length)
    }else{
        retun null
    }
}

var reader = new FileReader(),
blob = blobSlice(files[0], 0, 32);
if(blob){
    reader.readAsText(blob);
}

// 对象URL -- 指的是引用保存在File或Blob中数据的URL
function createObjectURL(blob){
    if(window.URL){
        return window.URL.createObjectURL(blob);
    }else if(window.webkitURL){
        return window.webkitURL.createObjectURL(blob);
    }else{
        return null
    }
}

var url = createObjectURL(files[0]);
if(url){
    img.src = url;
}

// 手工释放window.URL内存
function revokeObjectURL(url){
    if(window.URL){
        window.URL.revokeObjectURL(url);
    }else if(window.webkitURL){
        window.webkitURL.revokeObjectURL(url);
    }
}

// 读取拖放的文件
var droptarget = document.getElementById( "droptarget"); 
function handleEvent(event){ 
    var info = "", 
        output = document.getElementById("output"), 
        files, i, len; 
    EventUtil.preventDefault(event); 
    if (event.type == "drop"){ 
        files = event.dataTransfer.files; 
        i = 0; 
        len = files.length; 
        while (i < len){ 
            info += files[i].name + " (" + files[i].type + ", " + files[i].size + 
                " bytes)<br>"; 
            i++; 
        } 
        output.innerHTML = info; 
    } 
} 
EventUtil.addHandler(droptarget, "dragenter", handleEvent); 
EventUtil.addHandler(droptarget, "dragover", handleEvent); 
EventUtil.addHandler(droptarget, "drop", handleEvent);


//使用XHR上传文件-- 利用FormData对象
var droptarget = document.getElementById("droptarget"); 
function handleEvent(event){ 
    var info = "", 
        output = document.getElementById("output"), 
        data, xhr, 
        files, i, len; 
    EventUtil.preventDefault(event); 
    if (event.type == "drop"){ 
        data = new FormData(); 
        files = event.dataTransfer.files; 
        i = 0; 
        len = files.length; 
        while (i < len){ 
            data.append("file" + i, files[i]); 
            i++; 
        } 
        xhr = new XMLHttpRequest(); 
        xhr.open("post", "FileAPIExample06Upload.php", true); 
        xhr.onreadystatechange = function(){ 
            if (xhr.readyState == 4){ 
                alert(xhr.responseText); 
            } 
        }; 
        xhr.send(data); 
    } 
} 
EventUtil.addHandler(droptarget, "dragenter", handleEvent); 
EventUtil.addHandler(droptarget, "dragover", handleEvent); 
EventUtil.addHandler(droptarget, "drop", handleEvent);