阐明：
本文介绍如何使用 HTML5 和上传文件。 HTML5提供了一种输入类型“文件”，允许我们与本地文件进行交互。 文件输入类型对于从用户那里获取一些示例并执行一些操作可能很有用。 我们将在项目中使用文件 API，因此如果您需要任何功能的详细说明，可以查看该 API。 它还包含用于处理二进制文件的各种其他形式。 我们将使用 FileList 接口来获取文件列表。 使用File Reader接口读取文件，使用File接口获取文件属性等。
检查支持
由于HTML5还比较新，浏览器并不支持其所有功能，因此您最好检查一下您的浏览器如何支持文件功能。 要检测这一点，只需将下面的代码放入您的 HTML 文件中，然后查看是否收到警告。
if (window.File && window.FileReader && window.FileList && window.Blob) {
alert("File API supported.!");
} else {
alert(‘The File APIs are not fully supported in this browser.’);
}
如果得到以下信息，可以继续解释； 否则，您需要升级浏览器。
文件输入标签
文件输入标签与其他 HTML 输入标签相同，唯一的区别是“类型”。 对于文件类型输入，我们需要将元素类型设置为“file”类，如下所示：
选择一个文档
要选择文件，只需单击 HTML 页面上的“选择文件”按钮，然后从对话框中选择文件即可。 如果您启用了多项选择，则可以选择多个文件。 请参考右图：
处理选定的文件
现在我们已经选择了文件，下一步是检查文件属性，因此我们将使用文件界面。 File接口有两个非常重要的属性，对我们非常有帮助。 他们分别是：
readonly attribute DOMString name; readonly attribute Date lastModifiedDate;
正如属性名称所示，前者提供文件名，后者提供最后更改时间。
要在 JavaScript 中使用此接口（从现在开始我们将只使用脚本），只需编写如下代码：
function startRead(evt) {
var file = document.getElementById(‘file‘).files[0];
if (file) {
// getAsText(file);
alert("Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate);
}
}
现在，在 HTML 输入标记中添加 onchange 事件并调用该函数，如下所示：
如果到目前为止您所做的一切都是正确的，您将得到类似于右侧的输出。
添加拖动
到目前为止html5 上传大文件，我们都是通过按键来选择文件，但为了让事情变得更好，我们可以添加拖放支持，以便用户可以拖放文件来打开它们。 为此，请将以下脚本添加到您的脚本中：
function startReadFromDrag(evt) {
var file = evt.dataTransfer.files[0];
if (file) {
// getAsText(file);
var fileAttr = "Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate;
$(‘#draghere’).text(fileAttr);
alert(fileAttr);
}
evt.stopPropagation();
evt.preventDefault();
}
var dropingDiv = document.getElementById(‘draghere‘);
dropingDiv.addEventListener(‘dragover‘, domagic, false);
dropingDiv.addEventListener(‘drop‘, startReadFromDrag, false);
还添加到 HTML 和类型代码中以获得更好的输出。
Drop files here#draghere{ width:300px; height:100px; background-color:rgba(221,214,155,0.4); border:1px dashed black; text-align:center; }
读取文件内容
现在的主要部分是读取文件内容。 我们将使用文件读取器界面。 它为我们提供了以下处理文本和二进制文件的方法：
void readAsArrayBuffer(Blob blob); void readAsText(Blob blob, optional DOMString encoding); void readAsDataURL(Blob blob);
第三种方法用于以data URL方式读取文件内容时。 第二种方法用于读取基于文本的文件（支持UTF-8和UTF-16等编码）。 第一种方法用于将数据读取为数组对象。
我们将选择第二种和第三种方法。
要读取该文件，请将以下脚本、HTML 和类型添加到您的文件中。
Style
#op{
width:300px;
height:300px;
overflow:auto;
background-color:rgba(221,214,221,0.3);
border:1px dashed black;
}
Script
function getAsText(readFile) {
var reader = new FileReader();
reader.readAsText(readFile, "UTF-8″);
reader.onload = loaded;
}
function loaded(evt) {
alert("File Loaded Successfully");
var fileString = evt.target.result;
$("#op").text(fileString);
}
我们要做的就是在要显示文件文本的位置添加一个 div（带有 ID 输出）。 脚本中，getAsText(readfile)主要是新建一个FileReader对象来读取文件。 然后在下一行，我们使用 readAsText() 从文件中获取文本。 这是一个异步函数，因此我们需要等待它完成才能使用文本。 我们向读取器对象添加一个 onload 事件，以便在读取完成后立即通知我们。 读取完成后将调用加载的函数。 在其中，我们只是在 op div 内显示函数的文本。 如果到目前为止您所做的一切都是正确的，那么您就完成了。 检查下面的输出。 哦，抱歉，我忘了提醒您取消所有读取函数中对 getTextFile() 调用的注释。
现在要读取图像文件，只需将上面的函数替换为以下代码：
function startRead(evt) {
var file = document.getElementById(‘file‘).files[0];
if (file) {
if (file.type.match("image.*")) {
getAsImage(file);
alert("Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate);
}
else {
getAsText(file);
alert("Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate);
}
}
evt.stopPropagation();
evt.preventDefault();
}
function startReadFromDrag(evt) {
var file = evt.dataTransfer.files[0];
if (file) {
if (file.type.match("image.*")) {
getAsImage(file);
alert("Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate);
}
else {
getAsText(file);
alert("Name: " + file.name + "n" + "Last Modified Date :" + file.lastModifiedDate);
}
}
evt.stopPropagation();
evt.preventDefault();
}
function getAsImage(readFile) {
var reader = new FileReader();
reader.readAsDataURL(readFile);
reader.onload = addImg;
}
function addImg(imgsrc) {
var img = document.createElement(‘img‘);
img.setAttribute("src", imgsrc.target.result);
document.getElementById("op").insertBefore(img);
}
该代码并不像乍一看那么大。 它主要由先前方法的样板代码组成，并稍加修改。 getAsImage()方法主要读取图像作为数据URLhtml5 上传大文件，然后将其发送到“addImg()”。 他们创建一个新的图像元素并将其附加到 op div。 “File.type.match”用于标识文件类型。 检查右图中的输出。
发表评论