html5 java文件上传_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文件操作-文件上传(中)，拖拽上传，(下)，上传文件至服务器。

待续。。。

列表项目