HTML5 文件域+FileReader 读取文件
Posted 天马3798
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了HTML5 文件域+FileReader 读取文件相关的知识,希望对你有一定的参考价值。
一、读取文本文件内容,指定字符编码
<div class="container"> <!--文本文件验证--> <input type="file" id="file" multiple accept="text/plain" /> <input type="button" id="btn1" value="读取文件内容" onclick="showFiles();" /> <h4>选择文件如下:</h4> <blockquote></blockquote> </div>
js:
//读取文本文件实例 var fileBox = document.getElementById(\'file\'); function showFiles() { //获取选择文件的数组 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; readFile(file); } } //读取文件内容 function readFile(file) { var reader = new FileReader(); //中文windows系统 txt 文本多数默认编码 gbk reader.readAsText(file, \'gbk\'); reader.onload = function (e) { var result = reader.result; $(\'.container blockquote\').text(result); } }
二、读取或预览客户图片
<div class="container"> <!--图片类型验证方法1--> <input type="file" id="file" multiple accept="image/*" /> <input type="button" id="btn1" value="选择上传文件" onclick="showFiles();" /> <h4>选择文件如下:</h4> <img src="" id="img1" /> </div>
JS:
//读取图片实例 var fileBox = document.getElementById(\'file\'); function showFiles() { //获取选择文件的数组 var fileList = fileBox.files; for (var i = 0; i < fileList.length; i++) { var file = fileList[i]; //图片类型验证第二种方式 if (/image\\/\\w+/.test(file.type)) readFile(file); else console.log(file.name + \':不是图片\'); } } //读取图片内容 为DataURL //reader.readAsDataURL function readFile(file) { var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var result = reader.result; $(\'.container blockquote\').text(result); $(\'#img1\').attr(\'src\', result) } }
以上是关于HTML5 文件域+FileReader 读取文件的主要内容,如果未能解决你的问题,请参考以下文章
HTML5 文件域+FileReader 分段读取文件并上传-WebSocket
HTML5 文件域+FileReader 分段读取文件并上传-WebSocket