HTML5 文件域+FileReader 读取文件(一)

比眉伴天荒 2024-02-18 21:23 9阅读 0赞

##     ##

在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对象的对应的文件的大小，字节单位

实例：

![复制代码][copycode.gif]

预览图片：
            <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>

![复制代码][copycode.gif]

显示结果：

提示：该文件选择框设置了accept='image/\*'只显示图片。

不要靠accept属性来过滤文件类型，因为这只是客户端的文件类型过滤，这种文件类型过滤是很脆弱的，如果开发者需要进行文件上传，则必须在服务器端对文件类型进行过滤。

**二、使用FileReader读取文件内容**

FileReader同样是一个JavaScript对象，开发者可以通过该对象在客户端读取 文件上传域所选择的文件内容.[关于FileReader][FileReader]

实例1：

![复制代码][copycode.gif]

<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>

![复制代码][copycode.gif]

FileReader在读取文件的过程中可能多次触发onprogress事件，通过该事件绑定监听器即可实时监控文件的读取进度。

提示：FileReader只是客户端的JavaScript对象，使用FileReader所进行的上传也只是把磁盘上的文件读取到浏览器内存中，并未真正上传到服务器。如果需要真正把客户端文件上传到服务器，则可把文件数据以POST请求方式提交到远程服务器，远程服务器负责接收文件数据，并把数据内容保存到服务器。

实例2：

![复制代码][copycode.gif]

<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>

[copycode.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/92222f224a1743c7bdf7b4a8eb24e52d.png
[FileReader]: http://www.cnblogs.com/tianma3798/p/5836484.html