HTML5文件拖动，删除，分析，读取和上传

这是一个忙碌的一周。我们已经发现了新的HTML5 API如何帮助我们打开，阅读和上传用户将这些文件拖动并掉入浏览器窗口中。本文总结了浏览器支持的技术和当前水平。

钥匙要点

• > HTML5 API可以帮助打开，读取和上传用户已将其拖动到浏览器窗口中的文件。此功能由Chrome，Firefox和Opera的最新版本支持，但Opera只能通过标准文件输入来使用它。
> HTML5 FILELIST对象是类似数组的文件对象集合，FileReader对象允许您在JavaScript中打开文本或二进制文件。这使得在进行进一步处理或上传之前，可以检查文件类型和大小。
• >
> HTML5允许通过将“进度”事件连接到XMLHTTPREQUEST2对象来创建上传进度条。此功能加上拖放文件的能力，可以显着增强Web应用程序的可用性。
HTML5 API支持

您的JavaScript代码应在附加事件处理程序之前检查文件，filelist和fileReader对象的存在。在撰写本文时，这些由Chrome，Firefox和Opera的最新版本支持：

尽管Opera支持这些对象，但它们只能通过标准文件输入来使用 - 而不是拖放。因此，需要进一步检查；我建议使用xmlhttprequest2上传方法，例如

if (window.File && window.FileList && window.FileReader) { ... }

>文件拖动

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

所有浏览器（iPhone和iPad上的浏览器除外）支持显示熟悉的“浏览”按钮的文件输入类型。 HTML5中引入了“多个”属性，我们可以将更改事件处理程序附加到该字段：

Chrome和Firefox还允许用户将一个或多个文件拖动到所选元素上。您可以将事件处理程序连接在内，包括“ Dragover”和“ DragLeave”（用于更改样式）和“ Drop”，以检测掉落的文件，例如

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

检索filelist对象

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

HTML5 Filelist对象是类似数组的文件对象集合。文件输入字段通过文件属性（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集合包含许多文件对象。提供了三个有用的文件属性：

.name：文件名（不包括路径信息）

>
1. .. type：哑剧类型，例如图像/jpeg，文本/普通等。
2. .size：字节中的文件大小。

在进行进一步处理或上传之前，可以检查文件类型和大小，例如

if (window.File && window.FileList && window.FileReader) { ... }

有关更多信息，请参阅如何使用HTML5和JavaScript打开删除文件。

>使用fileReader

打开文件 HTML5 FileReader对象允许您在JavaScript中打开文本或二进制文件。正如您所期望的那样，readastext（）方法用于检索文本内容，例如

var xhr = new XMLHttpRequest();
if (xhr.upload) {
	... attach drag and drop events ...
}

同样，ReadAsdataurl（）方法将二进制图像数据作为编码数据URL检索，可以将其传递到Image SRC属性或画布元素：

document.getElementById("fileselect").addEventListener("change", FileSelectHandler, false);

有关更多信息，请参阅如何使用HTML5和JavaScript打开删除文件。

>使用ajax

上传文件 当用户保留在页面上时，可以将适当的文件上传到您的服务器。这只是将文件对象传递到xmlhttprequest2的send（）方法的问题：

document.getElementById("filedrag").addEventListener("drop", FileSelectHandler, false);

注意，我们还将文件名发送为HTTP标头。这是可选的，但是它允许我们使用诸如PHP之类的语言在服务器上使用其原始名称重新创建文件：

// 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++) {
	...
}

有关更多信息，请参阅如何使用HTML5和AJAX异步上传文件。

创建上传进度栏

我们还可以将“进度”事件附加到xmlhttprequest2对象：

// process image files under 300,000 bytes
if (file.type.indexOf("image") == 0 && file.size < 300000) {
	...
}

该处理程序接收一个带有.LOAD（传输的字节的数量）和.Total（文件大小）属性的事件对象。因此，可以计算进度并将其传递给HTML5进度标签或任何其他元素，例如

if (file.type.indexOf("text") == 0) {
    var reader = new FileReader();
    reader.onload = function(e) {
		// get file content
		var text = e.target.result;
		...
    }
    reader.readAsText(file);
}

有关更多信息，请参阅如何在HTML5和JavaScript中创建图形文件上传进度条。 希望您喜欢这个系列。文件拖放是一个重要的功能，可以转换Web应用程序的可用性。 HTML5终于变得容易了。

>关于HTML5文件拖动，删除，读取，分析和上传进度条

的常见问题（常见问题解答）

>如何在我的Web应用程序中实现HTML5拖放功能？

>实现HTML5拖放功能涉及几个步骤。首先，您需要创建一个Drop区域，该区域是用户可以删除文件的区域。这可以是任何HTML元素，但必须将“可拖动”属性设置为true。接下来，您需要为“拖动”和“丢弃”事件添加事件听众。当拖动物品在下降区域上方时，“拖曳”事件将发射，并且在删除该项目时发射“下降”事件。如果“ drop”事件的处理程序，您可以通过事件对象的“ datatrans.files”属性访问删除的文件。

>“ dataTransfer.files”和“ dataTranser.Items”？

>“ dataTransfer.files”和“ datatRansfer.items”之间有什么区别。 “ dataTransfer.files”属性是代表要拖动的文件的filelist对象。当您要处理服务器端上的文件时，这很有用。另一方面，“ dataTransfer.items”是代表所有阻力数据的DatatRansferitemlist对象。当您要处理不同类型的拖放数据时，这很有用，而不仅仅是文件。

为什么我的“ dataTransfer.files”在射击“ drop”事件时空为空？

是空的。 “ DataTransfer.files”属性仅在“ Drop”事件中填充。确保您是在正确的事件处理程序中访问它的。

>如何读取已删除文件的内容？

您可以使用FileReader API读取丢弃文件的内容。首先，您需要创建一个新的FileReader对象。然后，您可以使用“ readastext”或“ readasdataurl”方法读取文件内容。 “ readastext”方法将文件读取为文本字符串，而“ readasdataurl”方法将文件读取为数据URL。

在上传文件时如何显示进度栏？

>

您可以通过聆听XMLHTTPEREQUEST PEREQUEST PREQUEST PREQUEST的“进度”事件来显示进度栏。随着上载的进行，“进度”事件会定期发射。如果情况处理程序，您可以计算进度百分比并相应地更新进度栏。确保将XMLHTTPREQUEST对象的“上载”属性设置为真实，以启用“进度”事件。

>

>我如何处理多个文件上传？

>您可以通过在“ dataTransfer.files.files”属性上迭代来处理多个文件上传，哪些是文件。 filelist对象中的每个项目都是代表掉落文件的文件对象。您可以单独处理每个文件，例如，通过读取其内容或将其上传到服务器。

>

>如何限制可以删除的文件类型？

>您可以限制可以通过检查“ datatransfer.files.files.files.files.files”属性的“类型”属性的文件类型的文件类型。 “类型”属性是代表文件的MIME类型的字符串。如果不允许使用文件类型，则可以通过调用“ drop”事件处理程序中事件对象的“预防默认”方法来防止删除操作。

>我如何处理嵌套元素的拖放事件？

>处理嵌套元素的拖放事件可能很棘手，因为事件在DOM树上冒泡。为了防止父母元素收到针对子元素的拖放事件，您可以在子元素的事件处理程序中调用事件对象的“停止propagation”方法。

>

>我如何自定义文件在上面拖动文件时的外观？ “ Dragleave”和“ Drop”活动处理程序。您可以在CSS中定义类的外观。

>如何测试自动化测试中的拖放功能？

测试拖放功能可能具有挑战性，因为它涉及复杂的用户交互。但是，某些测试库（例如硒）提供了模拟阻力动作的方法。您还可以创建一个模拟的“ Drop”事件并将其派遣到Drop Zone Element。

以上是HTML5文件拖动，删除，分析，读取和上传的详细内容。更多信息请关注PHP中文网其他相关文章！