今天开始研究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.csdn.net/user/luq885/
看了一下它的Demo,做的很简单,服务器端是用php写的,我改成用.net写了,主要代码:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/717446ca04a6125dc5b6b54e0fa14ab4.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/0196c3df5ea9e936f21e9932cca91014.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
说明一下主要参数,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代码如下:
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
可以看到生成的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.csdn.net/user/luq885/