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

摘要：最后一次修改文件的时间。选择文件代码上传如图这时看文字显示如图此时我们在获得对象时，不能用这种方式获取文件对象了不然只获取的是对象集合里面的一个对象。

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

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

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

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

    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文件
代码：

如图：

这时看文字显示：
如图：

此时,我们在获得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 += ""
        }

    }

结果如图：

1.4.3 readAsText()方法的用法：

代码：

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

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

结果：

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

列表项目