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:数据读取完成时触发,无论是否成功

  • 相关阅读:
    MyEclipse2014安装插件的几种方式(适用于Eclipse或MyEclipse其他版本)
    淘淘商城 本地仓库配置和仓库jar包下载
    淘淘商城的第一天
    Oracle12c 性能优化攻略:攻略1-1:创建具有最优性能的数据库
    Eclipse开发环境配置
    Oracle12c 性能优化攻略:攻略目录表
    将日期或数据转换为char数据类型 TO_CHAR(x[[,c2],C3])
    根据条件返回相应值 decode(条件,值1,翻译值1,值2,翻译值2,...值n,翻译值n,缺省值)
    【功能】返回数据类型、字节长度和在内部的存储位置.DUMP(w[,x[,y[,z]]])
    alter table的用法
  • 原文地址:https://www.cnblogs.com/amy2011/p/3077480.html
Copyright © 2011-2022 走看看