HTML5文件操作-文件上传（上）

1. js要操作文件，首先得讲到的是文件api里常见的几个对象：

   1，Blob
   2，File
   3，FileList
   4，FileReader

   1.1 Blob对象表示的是二进制数据，提供了一个slice方法，该方法可以访问到字节内部的数据段（也就是整个数据的某一段数据）

1.2 File对象，File对象是从Blob对象继承过来的，表示的是一个具体的文件，有两个属性，name,文件的名字，不包括路径。lastModifiedDate,最后一次修改文件的时间。当然，从Bolb继承下来的，Blob有的，File也有。
代码：

<input type="file" id="file" name="">
<input type="button" name="" value="上传" id="button">
    window.onload = function() {
    var file = document.getElementById('file');
    var button = document.getElementById('button');
    var ofile = null;


    button.onclick = function() {
        //用户还没有点击“选择文件”把文件添加进input里（input里为空）
        //而直接点击了上传按钮，就让它退出
        if (file.files.length == 0) {
            console.log('请选择文件');
            return false;
        }
        //这里只选择了一个文件
        ofile = file.files[0]; 
        console.log(ofile);
    }
}

如图：

通过File来找size,type,lastModifiedDate
代码：

console.log(ofile.size + '-' + ofile.type + '-' + ofile.lastModifiedDate);

如图：

1.3 FileList对象表示的是一个文件file对象的集合,当我们用h5的多文件上传时，首先得要在type="file"的input元素里添加multiple属性，multiple="multiple",可允许用户选择多个文件,具体操作按住Ctrl继续选择多个文件，选择好之后，点击完成，比如你选了3个文件，这时，FileList对象里就存有3个不同的file对象，每个不同的小File对象里面保存着该图片的信息。
选择3文件
代码：

 <input type="file" id="file" name="" multiple="multiple">
 <input type="button" name="" value="上传" id="button">

如图：

这时看文字显示：
如图：

此时,我们在获得file对象时，不能用files[i]这种方式获取文件对象了（files[i//0,1,2]）,不然只获取的是对象集合里面的一个file对象。所以，我们要把files的[]去掉。ofile = file.files; 这样获取的就是一个文件列表，然后我们循环遍历每个对象看看其内容：
代码：

    button.onclick = function() {
        //用户还没有点击“选择文件”把文件添加进input里（input里为空）
        //而直接点击了上传按钮，就让它退出
        if (file.files.length == 0) {
            console.log('请选择文件');
            return false;
        }
        //这里只选择了一个存有文件对象的文件列表，该列表具有长度length
        ofile = file.files;
        console.log(ofile.length);//3
        console.log("------------------------")
        //遍历每个file对象
        for (var i = 0; i < ofile.length; i++) {
            console.log(ofile[i]);
        }     
    }

结果如图： 每个file对象的内容

1.4 FileReader 对象用来读取文件中的数据，异步的方式读取文件保存到内存中，并赋值给JavaScript的变量
FileReader里的四个读取文件的方法：

    1，readAsBinaryString();该方法把读取到的文件数据以二进制的形式保存到result属性里面，参数为一个Bolb对象。
    2，readAsDataURL();该方法会把该图片读成一个url保存到result里，也就是说可以把这个图片的结果作为img的src属性使用，就能显示出该图片
    3，readAsText();该方法是按某种编码来读取文件，第一个参数为Blob对象，第二个参数为编码方式，
    4，abort();中断文件读取。
FileReader里的事件：
    1,onloadstart 读取文件时开始触发；
    2,onprogress 读取文件的过程中触发；
    3，onload 读取成功时触发；
    4，onabort 读取中断时触发
    5，onerror 读取错误时触发
    6，onloadend 读取完成后触发 （无论成功与否）

1.4.1 readAsBinaryString()
在使用这些方法之前，先要搞个对象出来，var reader = new FileReader();创建完对象之后，直接调用该对象上的方法：reader.readAsBinaryString(ofile);把要读取的文件对象放进去读取结果在result里面，reader.result;
看代码：

button.onclick = function() {
//用户还没有点击“选择文件”把文件添加进input里（input里为空）
//而直接点击了上传按钮，就让它退出
        if (file.files.length == 0) {
            console.log('请选择文件');
            return false;
        }
        //这里只选择了一个存有文件对象的文件列表，该列表具有长度length
        ofile = file.files[0];

        var reader = new FileReader();//创建一个读取文件对象reader
        
        reader.readAsBinaryString(ofile);

        reader.onload = function() {//文件读取成功后 打印出数据结果，
            console.log(reader.result);
        }
    }

看图片：

1.4.2 readAsDataURL()方法：

直接看代码：

    button.onclick = function() {
        //用户还没有点击“选择文件”把文件添加进input里（input里为空）
        //而直接点击了上传按钮，就让它退出
        if (file.files.length == 0) {
            console.log('请选择文件');
            return false;
        }
        //这里只选择了一个存有文件对象的文件列表，该列表具有长度length
        ofile = file.files[0];

        var reader = new FileReader();//创建一个读取文件对象reader
        
        reader.readAsDataURL(ofile);

        reader.onload = function() {//文件读取成功后 打印出数据结果，
            document.body.innerHTML += "<img src='"+ reader.result + "'/>"
        }

    }

结果如图：

1.4.3 readAsText()方法的用法：

代码：

reader.readAsText(ofile, 'UTF-8');//默认utf-8;

        reader.onload = function() {//文件读取成功后 打印出数据结果，
            console.log(reader.result);
        }

结果：

以上就是我对js文件API的学习及理解，笔者技术水平有限，期待对js文件API的更进一步了解，笔者将会坚持写HTML5文件操作-文件上传（中），拖拽上传，（下），上传文件至服务器。
待续。。。

列表项目