Jquery插件研究：Ajax File Upload

今天开始研究Jquery的官方插件，首先是 Ajax File Upload插件，网站地址在这里 http://www.phpletter.com/DOWNLOAD/，其中还有其他的javascript file/image manager,以后再研究吧。

看了一下它的Demo，做的很简单，服务器端是用php写的，我改成用.net写了，主要代码：

$.ajaxFileUpload
(
... {
url:'doUpload.aspx',
secureuri:false,
fileElementId:'fileToUpload',
dataType:'json',
success:function(data,status)
...{
if(typeof(data.error)!='undefined')
...{
if(data.error!='')
...{
alert(data.error);
}else
...{
alert(data.msg);
}
}
},
error:function(data,status,e)
...{
alert(e);
}
}
)

说明一下主要参数，url用来指定后台处理的程序， secureuri暂时不太明白（后面还会说道）， fileElementId指的是文件选择框的ID，dataType用来指定返回的数据格式，支持xml、 script、json和html。返回的json的格式最简单：{error:'errormsg',msg:'successmsg'}，看后台代码就明白了。success为上传成功后执行的function，其中的data参数就是服务器端返回的参数。error当然就是上传失败后执行的function,其中参数e为javascript捕获的错误。status参数一般用不到，上传成功是值为"success",失败时一般为" timeout"。

ajax上传的原理也不是很复杂，这部分代码执行的时候，会创建一个用来上传文件的 from和一个用来接收返回值的Iframe,生成的html代码如下：

< form target ="jUploadFrame1195056805390" style ="position:absolute;top:-1200px;left:-1200px;" action ="doUpload.aspx" method ="post" name ="jUploadForm1195056805390" id ="jUploadForm1195056805390" enctype ="multipart/form-data" >< input id ="jUploadFile1195056805390" size ="45" name ="fileToUpload" type ="file" ></ form >< iframe style ="position:absolute;top:-1000px;left:-1000px;" name ="jUploadFrame1195056805390" id ="jUploadFrame1195056805390" ></ iframe >

可以看到生成的form的action属性就是上面指定的url参数的值， fileElementId指定的文件选择框直接放到这个form中，form的target属性指定的就是生成的iframe的id，这个form提交后返回值就返回到了这个iframe中。上面说的 secureuri属性如果指定一个地址的话，这个iframe的src属性就会是这个值，还是不明白有什么用。

这样就都明白了，其实还是使用原始的方式上传，只不过用javascript把上传和返回的过程都包装了起来，看起来好像页面没有刷新，其实刷新的是页面里面的iframe。

服务器端的代码很简单，需要说明的是如果返回值有中文的话，需要指定编码为gb2312，我是在web.config里面指定的。还有一点就是ie和firefox上传文件时服务器端得到的文件名不同，ie上传时得到的是上传时的完整路径，firefox上传时只能得到文件名。

全部代码请到这里下载 http://download.youkuaiyun.com/user/luq885/