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 分段读取文件

HTML5 文件域+FileReader 分段读取文件并上传-WebSocket

HTML5 文件域+FileReader 分段读取文件并上传-WebSocket

HTML5 文件域+FileReader 分段读取文件并上传到服务器

HTML5文件读取FileReader及文件读取模块的封装

HTML5文件读取FileReader及文件读取模块的封装