无论是PHP，还是其他的服务端脚本都提供了文件上传功能，实现起来也比较简单。而利用JavaScript来配合，即可实现Ajax方式的文件上传。虽然jQuery本身没有提供这样的简化函数，但有不少插件可以实现。其中，Phpletter.com提供的ajaxfileupload.js是一个轻量的插件，而且编写方式与jQuery提供的全局方法$.post()非常相似，简单易用。
    不过，该插件实在太简化了，除了可提供需上传文件的路径外，也就不能传递额外的值到后台服务端。所以，我修改了一下该脚本，增加个一个data对象参数。

一、原理
我这里使用的是PHP作为服务端脚本，几乎在每本较少PHP的书上都会提到如何使用move_uploaded_file()方法来上传文件，这里我就不再细说了。我想说的是，利用Ajax上传的原理。
因为一直在使用jQuery库，所以当想到Ajax时，第一反应就是试试$.post()方法，利用各选择器得到file文件框中的value值，然后提交到后台服务端。当然，后来证明这是不行的。（正因为这问题，我还查了不少资料，网上还提供了不少ASP等方式的脚本，真不知道该说什么好。。）
回到正题，要实现Ajax方式上传，其实并不难，方法也有不少。而本文提到的Phpletter.com的ajaxfileupload.js插件就是使用iframe的方式。这也是在不使用JavaScript脚本时，要实现不刷新页面上传时常见的方法。（本博客bo-blog后台撰写日志就是用该方法）
而ajaxfileupload.js插件也很简单，就是先利用jQuery的选择器获得file文件上传框中的文件路径值，然后动态的创建一个iframe，并在里面建立一个新的file 文件框，提供post方式提交到后台。最后，返回结果到前台。

二、使用
ajaxfileupload.js插件的使用很简单。
前台HTML代码类似：


后台doajaxfileupload.php脚本：


为了测试，可以使用类似下面的方式保存传递过来的变量值：


※ 注意
请留意HTML代码文件框中的标记：

所以，这两个值缺一不可，也不可混淆。

三、支持额外参数
有时候，我们需要在后台根据某些变量来觉得对上传文件的处理。例如，更新文件。这时，就需要往同台再传递一些额外的参数。所以，我修改了ajaxfileupload.js插件：


红色标记部分是我添加的内容。这样，我就可以在前台HTML部分，通过类似下面的代码来传递额外的参数：


后台处理脚本为：


可见，原理很简单，就是把额外的data对象内容一同加到iframe下的form中，传递到后台PHP脚本，以$_REQUEST等变量获得这些值。
后台输出保留的file_info.txt内容如下：

有了这些内容，相信后续的PHP脚本处理将不困难，这里也就不再一一说明了。
Demo代码下载：
修改过的ajaxfileupload.js插件：
四、附录
提供Ajax上传文件的jQuery插件有不少，除了利用iframe方式外，还有以Flash方式实现上传的，该方式还可提供进度条的显示。
http://www.uploadify.com/
http://valums.com/ajax-upload/
http://www.fyneworks.com/jquery /multiple-file-upload/