21|21|新兴API 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"; 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 = https://www.it610.com/article/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);