吉林 网站备案 照相最近的电脑培训班在哪里
这是忙碌的一周。 我们发现了新的HTML5 API如何帮助我们打开，读取和上传用户拖放到浏览器窗口中的文件。 本文总结了技术和浏览器支持的当前级别。
HTML5 API支持
您的JavaScript代码应该在附加事件处理程序之前检查File，FileList和FileReader对象是否存在。 在撰写本文时，最新版本的Chrome，Firefox和Opera支持这些功能：
if (window.File && window.FileList && window.FileReader) { ... }
尽管Opera支持这些对象，但是它们只能通过标准文件输入使用-不能拖放。 因此，需要进一步检查。 我建议使用XMLHttpRequest2上传方法，例如
var xhr = new XMLHttpRequest();
if (xhr.upload) {... attach drag and drop events ...
}
文件拖放
所有浏览器（iPhone和iPad上的浏览器除外）都支持显示熟悉的“浏览”按钮的文件输入类型。 HTML5中引入了“ multiple”属性，我们可以将change事件处理程序附加到该字段：
document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);
Chrome和Firefox还允许用户将一个或多个文件拖到所选元素上。 您可以附加事件处理程序，包括“ dragover”和“ dragleave”（用于更改样式）以及“ drop”用于检测已删除的文件，例如
document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);
检索FileList对象
HTML5 FileList对象是File对象的类似数组的集合。 文件输入字段通过文件属性（event.target.files）返回FileList。 删除的文件通过事件的dataTransfer.files属性（event.dataTransfer.files）返回一个FileList对象。
因此，我们可以使用单个事件处理程序检索FileList对象：
// cancel event default
e.preventDefault();// fetch FileList object
var files = e.target.files || e.dataTransfer.files;// process all File objects
for (var i = 0, file; file = files[i]; i++) {...
}
取消默认事件很重要。 这样可以防止浏览器在将文件放入窗口时尝试显示或处理该文件。
分析文件对象
FileList集合包含许多File对象。 提供了三个有用的文件属性：
- .name ：文件名（不包含路径信息）
- .type ：MIME类型，例如图像/ jpeg，文本/纯文本等。
- .size ：文件大小（以字节为单位）。
可以在进一步处理或上传之前检查文件类型和大小，例如
// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {...
}
有关更多信息，请参阅如何使用HTML5和JavaScript打开拖放的文件 。
使用FileReader打开文件
HTML5 FileReader对象使您可以使用JavaScript打开文本或二进制文件。 如您所料，readAsText（）方法用于检索文本内容，例如
if (file.type.indexOf("text") == 0) {var reader = new FileReader();reader.onload = function(e) {// get file contentvar text = e.target.result;...}reader.readAsText(file);
}
同样，readAsDataURL（）方法将二进制图像数据作为编码数据URL检索，可以将其传递给图像src属性或canvas元素：
if (file.type.indexOf("image") == 0) {var reader = new FileReader();reader.onload = function(e) {document.getElementById("myimage").src = e.target.result;}reader.readAsDataURL(file);
}
有关更多信息，请参阅如何使用HTML5和JavaScript打开拖放的文件 。
使用Ajax上传文件
用户停留在页面上时，可以将适当的文件上载到服务器。 只需将File对象传递到XMLHttpRequest2的send（）方法即可：
var xhr = new XMLHttpRequest();
xhr.open("POST", "receivefile.php", true);
xhr.setRequestHeader("X_FILENAME", file.name);
xhr.send(file);
请注意，我们还将文件名作为HTTP标头发送。 这是可选的，但是它允许我们使用诸如PHP之类的语言在服务器上使用其原始名称重新创建文件：
file_put_contents('uploads/' . $_SERVER['HTTP_X_FILENAME'],file_get_contents('php://input')
);
有关更多信息，请参考如何使用HTML5和Ajax异步上传文件 。
创建上传进度条
我们还可以将“ progress”事件附加到XMLHttpRequest2对象：
xhr.upload.addEventListener("progress", ProgressHandler);
处理程序接收到一个事件对象，该对象具有.loaded（传输的字节数）和.total（文件大小）属性。 因此，可以计算进度并将其传递给HTML5 progress标签或任何其他元素，例如
function ProgressHandler(e) {var complete = Math.round(e.loaded / e.total * 100);console.log(complete + "% complete");
}
有关更多信息，请参阅如何在HTML5和JavaScript中创建图形文件上传进度条 。
希望您喜欢这个系列。 文件拖放是可以改变Web应用程序可用性的重要功能。 HTML5终于使它变得容易。
From: https://www.sitepoint.com/html5-file-drag-drop-read-analyze-upload-progress-bars/