HTML5 文件域+FileReader 读取文件(一)
在HTML5以前,HTML的文件上传域的功能具有很大的局限性,这种局限性主要体现在如下两点:
- 每次只能选择一个文件进行上传
- 客户端代码只能获取被上传文件的文件路径,无法访问实际的文件内容
一、FileList对象和File对象
HTML5为type='file' 的<input/>元素增加了两个属性。
- accept:该属性控制允许上传的文件类型。该属性为一个或多个MIME类型字符串。多个MIME类型字符串之间应以都好分割。
- multiple:该属性设置是否允许选择多个文件
JavaScript可以通过files属性访问type='file'的<input/>元素生成的文件上传域的所有文件,该属性返回一个FileList对象,FileList对象相当于一个数组,开发者可以使用类似于数组的方法来访问该数组内的每个File对象。
File对象是一个JavaScript对象,可以通过该对象获取浏览器的所有文件信息。File对象包含如下属性。
- name:返回该File对象对应的文件的文件名, 不包括文件路径部分
- type:返回该File对象的文件的MIME类型字符串。
- size:返回该File对象的对应的文件的大小,字节单位
实例:
预览图片: <input id="images" type="file" multiple accept="image/*" /> <script type="text/javascript"> var imgInput = document.getElementById('images'); imgInput.onchange = function () { //1.获取所有选中文件列表 var fileList = imgInput.files; //2.遍历显示信息 for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //一次读取文件的文件名,文件类型,文件大小 var div = document.createElement('div'); div.innerHTML = "第" + (i + 1) + "个文件的文件名:" + file.name + ",文件类型:" + file.type + ",文件大小:" + file.size; //添加到 body中 document.body.appendChild(div); } } </script>
显示结果:
提示:该文件选择框设置了accept='image/*'只显示图片。
不要靠accept属性来过滤文件类型,因为这只是客户端的文件类型过滤,这种文件类型过滤是很脆弱的,如果开发者需要进行文件上传,则必须在服务器端对文件类型进行过滤。
二、使用FileReader读取文件内容
FileReader同样是一个JavaScript对象,开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容.关于FileReader
实例1:
<div> 读取文本文件: <input type="file" id="file1" /> </div> <div> 读取为二进制: <input type="file" id="file2" /> </div> <div> 读取为DataURL: <input type="file" id="file3" accept="*" /> </div> <p id="result" style="width:100%;word-break:break-all;word-wrap:break-word;"></p> <script type="text/javascript"> //判断浏览器是否支持FileReader对象 var reader if (FileReader) { reader = new FileReader(); } else { alert('您的浏览器不支持FileReader对象'); } //1.读取为文本 var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //判断读取的第一个文件是否是文本文件 if (/text\/\w+/.test(file.type)) { //以文本的方式读取内容 reader.readAsText(file, 'gbk'); reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } else { alert('读取的不是文本文件'); } } //2.读取为二级制 var file2 = document.getElementById('file2'); file2.onchange = function () { var file = file2.files[0]; //以二进制流的方式读取第一个文件 //reader.readAsArrayBuffer(file); //返回二进制数组 reader.readAsBinaryString(file); //返回二进制字符串 reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } //3.读取为DataURL var file3 = document.getElementById('file3'); file3.onchange = function () { var file = file3.files[0]; reader.readAsDataURL(file); reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>
FileReader在读取文件的过程中可能多次触发onprogress事件,通过该事件绑定监听器即可实时监控文件的读取进度。
提示:FileReader只是客户端的JavaScript对象,使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中,并未真正上传到服务器。如果需要真正把客户端文件上传到服务器,则可把文件数据以POST请求方式提交到远程服务器,远程服务器负责接收文件数据,并把数据内容保存到服务器。
实例2:
<div> 读取二进制文件: <input type="file" id="file1" accept="*" /> </div> <div> 显示进度: <progress id="pro" value="0"></progress> </div> <div id="result"></div> <script type="text/javascript"> var file1 = document.getElementById('file1'); file1.onchange = function () { var file = file1.files[0]; //读取为二进制 var reader = new FileReader(); reader.readAsBinaryString(file); //显示进度 var pro = document.getElementById('pro'); pro.max = file.size; pro.value = 0; reader.onprogress = function (e) { pro.value = e.loaded; } reader.onload = function () { document.getElementById('result').innerHTML = reader.result; } } </script>