翻译自MDN
使用HTML5中添加到DOM的File API,web内容现在可以要求用户选择本地文件，然后读取这些文件的内容。可以通过使用HTML <input>元素或拖放操作来完成此选择。
访问本地文件
html语法:
<input type="file" id="input">
File API可以从 File
对象中读取FlieList,FlieList中包含了用户所选取的文件
如果用户只选取了一个文件,那么我们只需要考虑第一个文件对象
使用DOM读取选择的文件:
var selectedFile = document.getElementById('input').files[0];
通过一个change事件访问选择的文件
可以通过change事件(不强制)访问FlieList,
<input type="file" id="input" onchange="handleFiles(this.files)">
当用户选择一个文件时，handleFiles()函数将调用一个FlieList对象，该对象包含表示用户选择的文件的文件对象。
如果您想让用户选择多个文件，只需使用输入元素上的multiple属性:
<input type="file" id="input" multiple onchange="handleFiles(this.files)">
在这种情况下，传递给handleFiles()函数的文件列表包含用户所选择的每个文件的一个文件对象。
获取选中文件的信息
DOM提供的FlieList对象列出由用户选择的所有文件，每个文件都指定为一个File
对象。通过检查文件列表长度属性的值，您可以确定用户选择了多少个文件:
var numFiles = files.length;
单个文件对象可以通过简单地访问列表数组来检索:
for (var i = 0, numFiles = files.length; i < numFiles; i++) {
var file = files[i];
..
}
这个循环遍历文件列表中的所有文件。
File
对象有三个带有文件信息的属性
- name 文件名(只读),不包含文件路径信息
- size 文件大小(只读),单位是字节(bytes)
- type 文件的MIME-type,如果获取不到文件的MIME-type,则这个属性就是一个空字符串
示例:显示文件的大小
下面的示例显示了可能使用的大小属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>File(s) size</title>
<script>
function updateSize() {
var nBytes = 0,
oFiles = document.getElementById("uploadInput").files,
nFiles = oFiles.length;
for (var nFileId = 0; nFileId < nFiles; nFileId++) {
nBytes += oFiles[nFileId].size;
}
var sOutput = nBytes + " bytes";
// optional code for multiples approximation
for (var aMultiples = ["KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"], nMultiple = 0, nApprox = nBytes / 1024; nApprox > 1; nApprox /= 1024, nMultiple++) {
sOutput = nApprox.toFixed(3) + " " + aMultiples[nMultiple] + " (" + nBytes + " bytes)";
}
// end of optional code
document.getElementById("fileNum").innerHTML = nFiles;
document.getElementById("fileSize").innerHTML = sOutput;
}
</script>
</head>
<body onload="updateSize();">
<form name="uploadForm">
<p><input id="uploadInput" type="file" name="myFiles" onchange="updateSize();" multiple> selected files: <span id="fileNum">0</span>; total size: <span id="fileSize">0</span></p>
<p><input type="submit" value="Send file"></p>
</form>
</body>
</html>
使用click()方法使用隐藏的文件输入元素
从 Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1)开始,您可以隐藏公认的丑陋文件<input>元素，并呈现您自己的接口，以打开并显示用户选择的文件。您可以通过将input元素设计为display:none并调用< input >元素的click()方法。
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<a href="#" id="fileSelect">Select some files</a>
处理单击事件的代码可以如下所示:
var fileSelect = document.getElementById("fileSelect"),
fileElem = document.getElementById("fileElem");
fileSelect.addEventListener("click", function (e) {
if (fileElem) {
fileElem.click();
}
e.preventDefault(); // prevent navigation to "#"
}, false);
您可以按您希望的那样，样式化新的按钮来打开文件选择器。
使用label元素触发隐藏的文件输入元素
<input type="file" id="fileElem" multiple accept="image/*" style="display:none" onchange="handleFiles(this.files)">
<label for="fileElem">Select some files</label>
没有必要添加JavaScript代码来调用文件元素的click()。在这种情况下，您可以按照您的希望来样式化标签元素。
使用拖放来选取文件
您还可以让用户将文件拖放到web应用程序中。
首先是设置一个接收的区域。根据你的应用程序的设计，你的内容的不同部分会接受不同的内容,但是让元素接收drop事件是很容易的:
var dropbox;
dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", dragenter, false); //进入
dropbox.addEventListener("dragover", dragover, false);//移动
dropbox.addEventListener("drop", drop, false);//放下
在本例中，我们将带ID dropbox的元素转换为我们的drop区域。这是通过监听dragenter、dragover和drop事件来实现的。
在我们的例子中，我们实际上不需要对dragenter和dragover事件做任何事情，所以这些函数都很简单。他们只是停止传播事件，防止发生默认的行为:
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
真正的魔法发生在drop()函数中:
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
这里，我们从事件中检索dataTransfer字段，将文件列表拉出，然后将其传递给handleFiles()。从这一点来看，处理文件的方式与用户使用输入元素或拖放的方式是一样的。
显示图片的缩略图
假设您正在开发下一个伟大的照片共享网站，并希望使用HTML5在用户实际上传图片之前显示缩略图预览。您可以像前面讨论的那样建立您的输入元素或删除区域，并将其调用为以下函数，如handlefile()函数。
function handleFiles(files) {
for (var i = 0; i < files.length; i++) {
var file = files[i];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
continue;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.
var reader = new FileReader();
reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
reader.readAsDataURL(file);
}
}
在这里，我们的循环处理用户选择的文件，查看每个文件的类型属性，看它是否是一个图像文件(通过在MIME类型字符串模式“image / *”上进行正则表达式匹配)。对于每个图像文件，我们创建一个新的img元素。
给每个img对象添加一个file属性以辨認 File;这将让我们稍后获取实际上传的图像。使用Node.appendChild()将新缩略图添加到文档的预览区域。
接下来，新建一个FileReader对象来处理异步加载图像并将其附加到img元素。创建了新的FileReader对象后，设置onload函数，然后调用readAsDataURL()以在后台启动读操作。当加载图像文件的全部内容时，它们将转换为数据传递给onload回调的URL。这个示例的实现将img元素的src属性设置为加载的图像，结果显示在用户屏幕上的缩略图中出现的图像。
使用 object URLs
Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 支持DOM 的 window.URL.createObjectURL()
和window.URL.revokeObjectURL()
方法.这些可以创建简单的URL字符串，可以用来引用任何可以引用DOM File
对象的数据,包括用户计算机上的本地文件
当您有一个文件对象时，您希望从HTML中引用URL，您可以为它创建一个object URL:
var objectURL = window.URL.createObjectURL(fileObj);
object URL是标识文件对象的字符串。每次调用window.URL.createObjectURL()时，都会创建一个唯一的object URL,即使之前已经给这个文件创建过一个对象了。当文档被卸载时，它们会自动被释放，如果你的页面动态地使用它们，你应该通过调用window.URL.revokeObjectURL()显式地释放它们
window.URL.revokeObjectURL(objectURL);
