HTML-Ajax文件上传

我们能够如此简单的实现

Ajax

的文件上传要得益于两个新的对象：

File

和

FormData

对象，还有就是w3c标准化

XMLHttpRequest

之后的扩展。现在新的浏览器都支持这些东西。

先来看一下

File

对象。

取得

File

对象有两个途径：

1、用户在一个

<input>

元素上选择文件后返回的

FileList

对象。

2、来自由拖放操作生成的

DataTransfer

对象。

这里主要讲的是第一个，第二个有兴趣的同学可以自行查找相关资料。

假如有这样一个

inpu

元素：

可以像下面那样获取到

File

对象：

input.files

是就是上面所说的

FileList

对象，这是一个数组对象，每一个元素都是一个

File

对象。

File

对象的主要属性如下：

name

：当前

File

对象所引用文件的文件名。

size

：文件大小，单位是字节。

type

：文件MIME类型。

还有其他一些信息，可以通过浏览器的调试命令行查看。

接下来就是

FormData

对象了。

通过这个对象可以模拟一个完整的表单。

获取

FormData

对象：

这对象就是一个表单，它可以被

XMLHttpRequest

直接发送。

它有一个方法

append

，作用就是给

FormData

对象添加字段。

比如：
相当于表单里面的一个

name

为user，

value

为hehe的

input

元素。

它的值还可以是一个

File

对象：
相当于

type

为

file

的

input

元素。

上面那样是从零开始构造，也可以从一个现存的表单来构造

FormData

对象。

比如有一个

form

元素ID为

myForm

:
这样

form

元素的表单字段就全部到

FormData

对象了。

最后就是被w3c标准化后的

XMLHttpRequest

功能更强了。

不仅可以直接发送

FormData

对象，还可以监视上传和下载的进度。

如果是图片，需要在上传之前预览的话，那就要用

FileReader

对象了。

使用

FileReader

对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用

File

对象或者

Blob

对象来指定所要处理的文件或数据。

创建一个

FileReader

对象：
要实现预览图片的话，主要是用它的

readAsDataURL

方法，这个方法读取到的文件内容是

data:URL

格式的字符串，可以直接放在

img

标签的

src

里面。

还有一个是它的

onload

事件，当读取操作成功完成时触发，可以在读取完成时把结果给

img

标签。

来个实例。

HTML代码清单如下：

首先获取到上传按钮，file input和进度显示的DOM对象：
然后给上传按钮添加点击上传的事件：

接下来实现上传的功能和进度监视的功能。

uploader

上传功能的代码清单：

XMLHttpRequest

分别有四个事件可以监听：

1、progress：处理中。

2、load：传输完成。

3、error：传输失败，出错了。

4、abort：传输退出，被终止了。

如果要监听这四个事件，都必须在调用

XMLHttpRequest.open

方法之前设定。

上传和下载都有这个四个事件。

如果是下载，四个事件是由

XMLHttpRequest

触发的，也就是要设置在

XMLHttpRequest

对象上面：
如果是上传的话，事件是由

XMLHttpRequest.upload

触发的，也就是要设置在

XMLHttpRequest.upload

属性上面：
这里要注意上面这点区别。

下面是上传进度监听的函数代码清单：
进度信息会在事件属性里面。

upload.js

的完整代码,如下：
然后是上传服务器端的脚步

upload.php

:
很简单，我们只要打印出上传信息就足够了。

如果在本地测试的话，速度太快，你可能会看不见上传进度百分比的变化。

原网址http://360us.net/article/26.html