文章阅读
JSer.ajaxUpload无刷新表单上传扩展
文章类别: JSer功能扩展  更新日期: 2012-08-02 23:16:45.0  点击次数:6559
  JSer.ajaxUpload是JSer的无刷新表单上传扩展。普通的AJAX不能发送带文件上传的数据请求,而这个ajaxUpload扩展却能突破这种限制,使含有文件上传字段的表单也可以进行ajax提交。
 
使用方法:
 
  1. 首先请点击链接下载JSer.ajaxUpload.js文件,并嵌入到您的网页。注意,此脚本依赖于JSer.js,请先确保在嵌入这个脚本之前,您已经嵌入了JSer.js,如果没有,请先从本站相关页面下载最新版本的JSer.js并嵌入到您的网页。
  2. 使用JSer为相关元素添加ajax上传事件代码(参见如下示例)。
 
  假设您有一个id="form1"的表单,需要使用ajaxUpload的方式提交数据到save.jsp这个数据保存页,您可以使用多种方式添加ajaxUpload上传事件:
 
示例1:(在普通按钮上添加事件)
HTML片段:
<input type="button" id="btnSave" value="提交" />
JS代码段:
JSer("#btnSave").click(function(){
    JSer.ajaxUpload({
        form:"#form1",
        url:"save.jsp",
        type:"json",
        success:function(d){
            alert("上传成功,返回JSON: "+d);
        }
    });
});
 
示例2:(在提交按钮上添加事件)
HTML片段:
<input type="submit" id="btnSave" value="提交" />
JS代码段:
JSer("#btnSave").click(function(){
    JSer.ajaxUpload({
        form:"#form1",
        url:"save.jsp",
        type:"json",
        success:function(d){
            alert("上传成功,返回JSON: "+d);
        }
    });
    return false; //注意一定要加上这句,用于取消默认的提交动作,以免重复提交.
});
 
示例3:(直接为表单提交添加事件)
JS代码段:
JSer("#form1").submit(function(){
    JSer.ajaxUpload({
        form:this, //直接在表单上添加事件,这儿可以写this(即当前表单)
        url:"save.jsp",
        type:"json",
        success:function(d){
            alert("上传成功,返回JSON: "+d);
        }
    });
    return false; //注意一定要加上这句,用于取消默认的提交动作,以免重复提交.
});

特别注意:
  注意上面三个示例中红色文字部分,特别是后面两个例子,在提交按钮或表单上添加事件时,函数末尾一定要加上return false, 用于取消当前的默认提交动作(而改为ajaxUpload提交),否则(在某些浏览器下)会产生重复的上传请求, 这与您平常普通的ajax事件处理是一个道理。
  下面最后让我们来看一看JSer.ajaxUpload脚本的详细用法吧:
 
JSer.ajaxUpload.js用法:
语法: JSer.ajaxUpload(参数对象);
参数对象可选属性值列表:
 
属性名称 类型 默认值 说明
form JSer选择符 <无> 指定要进行ajax上传的表单对象(即选择符选择的必须是form元素)。
url 字符串 form表单的
action属性值
指定ajaxUpload数据提交到的地址,
如果不指定此参数,将使用form元素的action属性值。
type 可选字符串 'html' 指定ajaxUpload请求返回的数据类型。可取值如下:
'json': 指定请求返回的数据类型为JSON对象(推荐尽可能地以json作为ajaxUpload的返回).
'script': 指定请求返回的数据类型为脚本代码并立即执行.
'xml': 指定返回的数据类型为XML Document对象.
'html': 指定返回的为普通html字符串。
timeout 整数 <无>
指定以秒为单位的超时时间.
当超过指定的时间后,ajax请求还未执行完毕,则强行中止此次请求并调用error回调函数。
success function(d) <无>
回调函数:当ajax请求成功后将被执行。
您可以使用函数中的this隐含对象来访问当前的提交表单;同时此函数接收一个参数d,代表ajax请求返回的数据,其类型由上面的type值决定。
特别注意:这儿所说的“成功”,仅仅只是指ajaxUpload本身的请求成功,并不代表数据提交到的处理页一定会"成功"(由于ajaxUpload的特殊性,即它不可能像普通的ajax请求那样传递数据,只是模拟ajax,使用不可见的iframe元素来进行数据提交,并监听其加载的HTML页面代码,来实现类似的ajax提交动作)。例如,当您指定type值为html或xml时,数据提交到的处理页面因发生服务器端错误而抛出异常,但该异常页面仍将以普通HTML的形式输出到客户端,此时ajaxUpload则会认为本次请求是成功的(实际并非如此),不过如果您将type值指定为json或script时,则不会出现这种问题,因为返回的并不是有效的json数据或script代码时,ajaxUpload会认为本次请求是失败的。所以,建议大家以json对象作为ajaxUpload的返回,否则,您应尽可能地在success回调函数中验证所返回的数据的有效性,以确保该请求是否一定成功。
error function(status, xml, err) <无>
回调函数:当ajax请求返回失败时被执行。
您可以使用函数中的this隐含对象来访问当前的提交表单;此函数接收如下三个参数:
 status: 错误状态字符串,返回的值可能是: 'timeout', 'errorJson', 'errScript'之一,分别代表"请求超时"、"无效的JSON"和"无效的script";
 xml: 通常代表ajaxUpload请求返回的HTML Document对象;
 err: 错误描述信息对象(如果有),此对象通常由try...catch语句捕获。
 
complete function(status, xml) <无>
回调函数:当ajax请求完成时被执行,而不管请求是否成功。
您可以使用函数中的this隐含对象来访问当前的提交表单;此函数接收下面两个参数:
 status: 错误状态字符串,返回的值可能是: 'success', 'timeout', 'errorJson', 'errScript'之一,分别代表"请求成功"、"请求超时"、"无效的JSON"和"无效的script";
 xml: 通常代表ajaxUpload请求返回的HTML Document对象;
[ 上一篇 JSer.modalDialog模态窗口 ]
2011-2014    JDiy网页编程技术站   -   http://www.jdiy.org     All rights reserved     捐助作者


技术支持QQ:39886616 QQ群:7759217
联系JDiy作者: ziquee java/javascript WEB编程
E-mail:ziquee@abcbcd.com http://189.cn
*尊姓大名:

*电子邮箱:

*QQ号码:

*留言内容:
提交留言
取消
loading...
注:带"*"的为必填项。请如实填写您的E-mail或QQ号码以便我们能与您取得联系。