jQuery，ajax文件上传的实现

← 手办家族又添新丁

《蛛丝马迹》—CSI探员的喃喃自语 →

jQuery，ajax文件上传的实现

发表于  2009/10/30  由  CoCo

 

现在做网站，你不用ajax你都不好意思和人家打招呼。最近在做的一个项目，需要使用ajax方式进行文件的上传。但众所周知，ajax本身貌似本身并没有办法读取本地的文件形成二进制流上传到服务器，况且即使不用ajax传统的表单也需要定义“multipart/form-data”这样的方式。于是到处到找jQuery的ajax文件上传插件，我的需求是简单，无论接口还是功能。还真给找到一个：http://www.phpletter.com/Demo/AjaxFileUpload-Demo/。

其实原理很简单，和咱想的一样，这个插件就是虚拟了一个iframe，在iframe中创建了一个文件上传的标准表单，然后填入文件，post这个form，获取返回的数据给调用者。服务器端的编程和普通上传没有区别，只是注意将上传结果使用json或者xml的格式返回就好了。

使用非常简单，假设本地的上传file input框的ID是res_file，那么只要如下调用：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

$.ajaxFileUpload({ url:'upload.php',//服务器端程序 secureuri:false, fileElementId:'res_file',//input框的ID dataType: 'json',//返回数据类型 beforeSend:function(){//上传前需要处理的工作，如显示Loading... }, success: function (data, status){//上传成功 if(data.success == 1){ //从data中获取数据，进行处理 } else{ alert('上传失败！'); } } });

服务器端收到的post的文件ID为res_file。如果用json格式，服务器端处理完上传逻辑后输出json格式的数据，可以在success函数中读取，并进行相应操作，如预览上传的图片和flash等。