zoukankan      html  css  js  c++  java
  • html5文件 Amy

    一、FileList对象鱼file对象

      html4中,file控件只允许放置一个文件,html5中增加了multiple属性,允许file控件一次放置多个文件,这些file的列表就是FileList对象,有属性name表示文件名,有lastModifiedDate属性表示文件的最后修改日期

        <input type="file" id="f" multiple size="80"/><!--size属性是控制上传框的大小-->
        <input type="button" onClick="btn_click();" value="上传文件"/>
    function btn_click(){
        var f=document.getElementById("f");
        for(var i=0;i<f.files.length;i++){
            alert(f.files[i].name);
        }
    }

    二、Blob对象

      2.1 Blob对象的介绍:

        Blob是一个可以存储二进制文件的容器,使用二进制保存数据,数据库常常使用Blob来保存数据,File接口继承了Blob对象。

      2.2 Blob对象的属性和方法

        2.2.1 创建Blob对象:使用BlobBuilder接口构建

    var BlobBuilder = window.MozBlobBuilder || window.WebKitBlobBuilder || window.BlobBuilder;
    var bb = new BlobBuilder(); 

        2.2.2 向blob添加数据:使用append方法

    bb.append('hello');

        2.2.3 获取Blob对象:使用getBlob方法

    bo = bb.getBlob('text/plain');

        2.2.4 两个属性:size(返回字节大小)和type(返回数据类型)

    bo.size; // 5
    bo.type; // text/plain

    三、FileReader接口

      3.1 FileReader:HTML5中,引入了FileReader接口,来实现对本地文件的异步操作,使用该API可以在浏览器主线程中异步访问文件系统,将文件读入内存

      3.2 检查浏览器是否支持FileReader接口

      if(typeof FileReader=='undefined'){
            alert("您的浏览器不支持FileReader接口");
        }else{
            alert("您的浏览器支持FileReader接口");
        }

      3.3 FileReader接口读取文件的方法:

      readAsBinaryString(file):将文件读取为二进制码

      readAsText(file,[encoding]):将文件读取为文本,第二个参数是文本编码方式,默认是UTF-8

      readAsDataURL(file):将文件读取为Data URL字符串,将小文件以一种特殊格式的URL地址形式直接读入页面,这里的小文件是指图像和html格式的文件

        var f=document.getElementById("f");
        var r=document.getElementById("result");
        function readAsBinaryString(){
            var file=f.files[0];
            var read=new FileReader();
            read.readAsBinaryString(file);
            read.onload=function(f){
                r.innerHTML=this.result;
            }
        }
        function readAsDataURL(){
            var file=f.files[0];
            var read=new FileReader();
            read.readAsDataURL(file);
            read.onload=function(f){
                r.innerHTML='<img src="'+this.result+'"/>';
            }
        }

       3.4 FileReader接口的事件

      onabort:数据读取中断时触发

      onerror:数据读取出错时触发

      onloadstart:数据开始读取时触发

      onprogress:数据读取过程中触发

      onload:数据读取成功完成时触发

      onloadend:数据读取完成时触发,无论是否成功

  • 相关阅读:
    hdu 3709 Balanced Number 数位dp
    通过大数据分析典型的长尾问题场景及解法
    【无人驾驶技术揭秘】从机器学习角度揭秘学习型避障小车的设计思路
    Git Flow——Git团队协作最佳实践
    【技术合集】新春来袭,锦囊妙计助程序员过个好年
    【最佳编程实践】编写「可读」代码的实践
    【开发工具推荐】31款轻量高效的开源JavaScript插件和库
    【微服务那些事】Microservices场景下的持续部署
    前端图像处理指南
    Sed&awk笔记之awk
  • 原文地址:https://www.cnblogs.com/amy2011/p/3077480.html
Copyright © 2011-2022 走看看