今天开始研究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代码如下:
<formtarget="jUploadFrame1195056805390"style="position:absolute;top:-1200px;left:-1200px;"action="doUpload.aspx"method="post"name="jUploadForm1195056805390"id="jUploadForm1195056805390"enctype="multipart/form-data"><inputid="jUploadFile1195056805390"size="45"name="fileToUpload"type="file"></form><iframestyle="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/
分享到:
相关推荐
jquery ajax file upload
jquery官方插件ajax file upload使用的实例,用asp.net做的服务器端。具体说明请看这里http://www.cnblogs.com/luq885/archive/2007/11/15/959749.html
异步文件上传ajaxFileUpload包,从gitHub下载的,分享一下。大家也可以从gitHub下载:https://github.com/davgothic/AjaxFileUpload
jquery ajax file upload
ajaxFileUpload 博文链接:https://raising.iteye.com/blog/2233668
项目中会经常用到AJAX无刷新上传图片,但是iframe上传和flash插件都是比较复杂的,所以就找了一个jquery的插件。 代码如下 使用方法如下 [removed] $(function () { var button = $('#upload'); new AjaxUpload...
主要为大家分享了jQuery Ajax File Upload实例源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
jquery实现的ajax文件上传功能 $.ajaxFileUpload ( { url:'doajaxfileupload.php', secureuri:false, fileElementId:'fileToUpload', dataType: 'json', success: function (data, ...
new AjaxUpload(button, { action: 'servlet/import', name: 'newFileName',//更改上传的文件名 data : { 'key1' : "7月份", 'key2' : "8月份", 'key3' : "9月份" }, onSubmit : function...
浏览器迫使我们使用文件输入控件(<input type=”file” />)做上传,然而此控件的样式是不能修改...Ajax Upload文件上传插件不会污染任何命名空间,所以它与jQuery,Prototypejs,mootools其他JavaScript库兼容。
ajaxupload,c#上传,jquer上传,按钮上传,jquery,上传,ajaxupload单个按钮实现图片上传,不用file上传
支持上传多个文档Ajax 开发实例, Chrome上传多个没问题,但IE上传会出现错误 序列化类型为“System.Collections.Generic.LinkedListNode`1[[ViewDataUploadFilesResult, App_Web_5x24fddx, Version=0.0.0.0, ...
轻松上传文件 Jquery 插件 - Ajax 文件上传
其中有些已经无法访问,或许是文件...jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File Style.Styling an input type file.Progress Bar Plugin.jQuery插件-表单
海量的jQuery插件帖,很经典,不知道什么时候开始流传,很早以前就收藏过,为了工作方便还是发了一份放在...jQuery插件-文件上传(File upload)Ajax File Upload.jQUploader.Multiple File Upload plugin.jQuery File St
简单的jQuery插件可通过AJAX提供即时图像上传。 用法 该插件是在jQuery 1.9.1版本上开发的,但我确定它在其他版本上也可以正常工作。 包括jQuery和插件: < script src = "/path/to/jquery.js" > < / ...
ASP.NET MVC AJAX 文件上传示例代码。 使用 jquery.fileupload + bootstrap 实现,支持多个文件上传。 运行环境:Visual Studio 2012 project, ASP.NET MVC4
'fileDataName' : 'file' 因为在页面上没有加上这个属性,导致在aciton里边接收不到file文件,页面会显示:HTTP ERROR! <result name="upload" type="dispatcher"> /index.jsp return "upload"; 开始我这里...
拖放文件上传-PHP-Jquery-AJAX 这是使用 HTML5 拖放功能的最简单易懂的上传文件版本。 安装指南: 1.在你的机器上安装Xampp。 2.使用本地服务器运行项目。 所有文件都将上传到名为“uploads”的文件夹中 享受