利用html5可以对本地的如文本、图片等文件读取操作，html5定义了一个file对象类型来表示文件，每个file对象对应一个文件。file对象有3个属性：name、size、type。name是不包含路径的文件名，size是以字节为单位的文件体积大小，type则是文件的MIME（例如image/jpg，关于MIME 参考手册 参见https://www.w3school.com.cn/media/media_mimeref.asp）。
html5访问本地文件系统时，需要先获取File对象句柄，获取文件句柄的方式主要有两种：表单输入（选择文件）、拖拽。
出于安全考虑，浏览器只允许用户点击<input type="file">来选择本地文件，用JavaScript对<input type="file">的value赋值是没有任何效果的。当用户选择了上传某个文件后，JavaScript也无法获得该文件的真实路径：
关于FileReader可见 FileReader - Web API 接口参考 | MDN
FileReader提供的方法：
readAsBinaryString(File|Blob)
readAsText(File|Blob [, encoding])
readAsDataURL(File|Blob)
readAsArrayBuffer(File|Blob)
FileReader提供的事件：
onloadstart：文件开始读取时触发
onprogress：当文件正在读取时触发，onprogress事件中，提供了三个属性：lengthComputable（不为真，则event.total等于0）、loaded（已经传输的字节）、total（传输文件总字节）
onload：传输成功完成
onabort：传输被用户取消
onerror：传输中出现错误
onloadend：传输结束，但是不知道成功还是失败
accept属性
【详见：https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input/file 页有关部分】
accept 属性是一个字符串，它定义了文件 input 应该接受的文件类型。这个字符串是一个以逗号。如：
<input type="file" id="profile_pic" name="profile_pic" accept=".jpg, .jpeg, .png">
表单输入（选择文件）
这是最常用的场景，用户选择文件以后，触发文件选择框的change事件，通过访问文件选择框元素的files属性可以拿到选择的文件列表。如果文件选择框指定了multiple="multiple"，则一个文件选择框可以同时选择多个文件，files包含了所有选择的文件对象；如果没有指定，则只能选择一个文件，files[0]就是所选择的文件对象。
例1、读取本地文本文件并显示的例子，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读取本地文件文件并显示</title>
</head>
<body>
<script>
function show()
{
var reader = new FileReader();
reader.onload = function()
{
//alert(this.result)
story.value=this.result
}
var f = document.getElementById("filePicker").files[0];
reader.readAsText(f);
}
</script>
<input type="file" name="file" id="filePicker" onchange="show()" />
<br>
<textarea id="story" name="story" rows="15" cols="60">
</textarea>
</body>
</html>
【注、document.getElementById()是JavaScript获取网页标签元素的方法】
保存为文件名为：读取本地文本文件并显示.html
用浏览器打开效果：
例2、读取本地图片文件并显示的例子，源码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>读取本地图片文件并显示</title>
</head>
<body>
<!-- multiple 一个文件选择框可以同时选择多个文件
<input type="file" id="selectFiles" onchange="dealSelectFiles()" multiple webkitdirectory>
-->
<input type="file" id="selectFiles" onchange="dealSelectFiles()" >
<canvas id="myCanvas" width=1440 height=900></canvas>
<script>
var imgPosX = 0;
var imgWidth = 256;
function dealSelectFiles(){
// get select files.
var selectFiles = document.getElementById("selectFiles").files;
for(var file of selectFiles){
console.log(file.webkitRelativePath);
// read file content.
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = function(){
// deal data.
var img = new Image();
// after loader, result storage the file content result.
img.src = this.result;
img.onload = function(){
var myCanvas = document.getElementById("myCanvas");
var cxt = myCanvas.getContext('2d');
cxt.drawImage(img, imgPosX, 0);
imgPosX += imgWidth;
}
}
}
}
</script>
</body>
</html>
保存为文件名为：读取本地图片文件并显示.html
用浏览器打开效果：
拖拽
拖拽是另一种常见的文件访问场景，这种方式通过dataTransfer的对象来获得拖拽文件列表。同样可以支持多文件拖拽。
下面给出拖拽本地图片文件并显示的参考源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拖拽本地图片文件并显示</title>
<style type="text/css">
#area{width:100%;height:200px; line-height: 200px; text-align: center; border: 1px solid #DDDDDD;}
#prev{width:100%;min-height: 400px; border: 1px solid #FF0000;}
</style>
</head>
<body>
<div id="area">将图片拖放到该区域</div>
<h1>图片预览</h1>
<hr />
<div id="prev"></div>
</body>
<script>
window.onload = function(){
var oArea = document.getElementById("area");
var oPrev = document.getElementById("prev");
oArea.ondragenter = function(){
oArea.innerHTML = "请释放鼠标";
}
oArea.ondragleave = function(){
oArea.innerHTML = "将图片拖放到该区域";
}
oArea.ondragover = function(ev){
ev.preventDefault();
}
oArea.ondrop = function(ev){
ev.preventDefault();
var files = ev.dataTransfer.files;
for(var i = 0 , len = files.length;i<len;i++){
var file = files[i];
var reader = new FileReader();
reader.readAsDataURL(file);
(function(reader){
reader.onload = function(){
var oImg = document.createElement("img");
oImg.src = this.result;
oPrev.appendChild(oImg);
}
})(reader);
}
}
}
</script>
</html>
保存为文件名为：拖拽本地图片文件并显示.html
用浏览器打开效果（提示：按着ctrl键单击多个文件名可以一次选择多张图片拖入）：
在web应用程序中使用文件