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

HTML5 文件域+FileReader 读取文件(一)的更多相关文章

  1. HTML5 文件域+FileReader 读取文件并上传到服务器(三)

    一.读取文件为blob并上传到服务器 HTML <div class="container"> <!--读取要上传的文件--> <input type ...

  2. HTML5 文件域+FileReader 读取文件(二)

    一.读取文本文件内容,指定字符编码 <div class="container"> <!--文本文件验证--> <input type="f ...

  3. HTML5 文件域+FileReader 分段读取文件并上传(八)-WebSocket

    一.同时上传多个文件处理 HTML: <div class="container"> <div class="panel panel-default&q ...

  4. FileReader读取文件详解

    FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. <in ...

  5. FileReader读取文件

    前言:FileReader是一种异步文件读取机制,结合input:file可以很方便的读取本地文件. input:file 在介绍FileReader之前,先简单介绍input的file类型. < ...

  6. FileReader读取文件里文乱码问题

    有一个UTF-8编码的文本文件,用FileReader读取到一个字符串,然后转换字符集:str=newString(str.getBytes(),"UTF-8");结果大部分中文显 ...

  7. H5 FileReader读取文件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. R8&mdash;批量生成文件夹,批量读取文件夹名称+R文件管理系统操作函数

    一. 批量生成文件夹,批量读取文件夹名称 今日,工作中遇到这样一个问题:boss给我们提供了200多家公司的ID代码(如6007.7920等),需要根据这些ID号去搜索下载新闻,从而将下载到的新闻存到 ...

  9. python练习六十一:文件处理,读取文件内容

    python练习六十一:文件处理,读取文件内容 假设要读取text.txt文件中内容 写文件(如果有文件,那直接调用就行,我这里自己先创建的文件) list1 = ['python','jave',' ...

随机推荐

  1. 第十周java 学习总结

    20145306 java的网络编程 网络概述 网络编程技术是当前一种主流的编程技术,随着联网趋势的逐步增强以及网络应用程序的大量出现,所以在实际的开发中网络编程技术获得了大量的使用.至于以后的实际修 ...

  2. laravel homestead vagrant box安装使用,问题,及相关命令

    Vagrant is a tool that manages oracle virtual boxes 1.本地下载https://atlas.hashicorp.com/laravel/boxes/ ...

  3. 使用FTP删不掉文件的解决方法

    今天在清理自己的服务器的时候发现曾经上传了一些png文件,中文命名的,权限是718,如果权限为777就可以删掉但是很奇怪的是执行权限修改也不行,改不掉: 最后的解决方法就是使用windows 随便打开 ...

  4. 第 13 章 装饰模式【Decorator Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> Ladies and gentlemen,May I get your attention,Please?,Now I’ ...

  5. 保持Service不被Kill掉的方法--双Service守护 &amp;&amp; Android实现双进程守护

    本文分为两个部分,第一部分为双Service守护,第二部分为双进程守护 第一部分: 一.Service简介:Java.lang.Object ↳Android.content.Context  ↳an ...

  6. Hadoop集群上使用JNI,调用资源文件

    hadoop是基于java的数据计算平台,引入第三方库,例如C语言实现的开发包将会大大增强数据分析的效率和能力. 通常在是用一些工具的时候都要用到一些配置文件.资源文件等.接下来,借一个例子来说明ha ...

  7. express学习之session

    最新版本的express没有包含session依赖项,需要我们自己配置并安装. 安装方法:npm install express-session 使用:var session = require('e ...

  8. jQuery系列 第一章 jQuery框架简单介绍

    第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...

  9. PhysicalBasedRendering(一)物理篇

    很多人对PBR的理解是存在偏差的,跳不出传统渲染模型的思维圈子,把它理解成一种模拟效果更为精确的算法公式,虽然在某种程度上是对的,但没有看到PBR的本质. PBR是对光在真实世界中与环境交互的一种近似 ...

  10. JDK 5.0 注解知识快速进阶

    1.了解注解 对于Java开发人员来说,在编写代码时,除了源程序外,还会使用Javadoc标签对类.方法或成员变量进行注释,一遍使用Javadoc工具生成和源代码配套的Javadoc文件,如@para ...