jquery 简易插件 异步form提交、文件异步提交,jquery 文件异步提交

 $.ajax 默认不支持文件提交,

这里提供一个form target = iframe 的异步提交插件

如果需要提交文件form 需要设置属性 enctype="multipart/form-data",使用插件后会自动使用target = iframe提交form

实现异步提交,兼容性好,用法简单!

(function ($){
	/**
	 * @name from的iframe提交 v0.1
	 * @desc 主要是考虑带file的from异步提交
	 * @param options
	 *        	success 成功调用函数 success(retex,toiframe);
	 *       	error 失败调用函数 error(toiframe);
	 *        	complete 完成调用函数 complete(toiframe,'success');
	 *        	isSubmit 是否自动提交,默认 false
	 *       	isOne 是否一次性, 默认 false
	 * @pending       isAddDiscern 是否增加请求标识(默认iframe_async=1)如果是字符串添加此参数请求值为1 
	 * @example $('form#file').form_iframe({success:function (retex){alert('提交成功,'+retex)}});
	 * @author hank 
	 */
	$.fn.form_iframe = function (options){
		var my = $(this);
		var defaults = $.extend({}, $.fn.form_iframe.defaults);
		var opts = $.extend(defaults, options);
		my.each(function (){
			var target, iframe_name, toiframe,
				myform = $(this);
			if(!myform.is('form'))
				return true;
			do{
				iframe_name = 'iframe_'+((Math.random()*10000000000000000).toString()).slice(0,14);
			}while($('iframe[name="'+iframe_name+'"]').size() > 0);
			toiframe = $('<iframe form_iframe="1" name="'+iframe_name+'"></iframe>').hide();
			myform.attr('target',iframe_name);
			myform.after(toiframe);
			myform.bind('submit',function (){
				var subCou = (isNaN(parseInt($(this).attr('form_iframe-cou'))) ? 1 : (parseInt($(this).attr('form_iframe-cou'))+1));
				$(this).attr('form_iframe-cou', subCou);
				toiframe.attr('form_iframe-cou', subCou);
			});
			toiframe.data('myform',myform);
			toiframe.bind({"error.form_iframe":function (){
				if(!toiframe.is('[form_iframe-cou]')){
					return;
				}
				opts.error(toiframe);
				opts.complete(toiframe,'failure');
				_my_complete(toiframe, 'failure');
			},
			"load.form_iframe":function (){
				if(!toiframe.is('[form_iframe-cou]')){
					return;
				}
				var retdom = $(this).contents(),
					retex = $(retdom).text();
				opts.success(retex,toiframe);
				opts.complete(toiframe,'success', retex);
				_my_complete(toiframe, 'success');
			}});
			if(opts.isSubmit)
				myform.submit();
		});
		function _my_complete(iframe){
			if(opts.isOne)
				iframe.remove();
		}
		return my;
	};
	$.fn.form_iframe.defaults = {
			success: function (){},    
			error: function (){},
			complete:function (){},
			isSubmit:false,
			isOne:false
	};
})(jQuery);

猜你喜欢

转载自blog.csdn.net/huang007guo/article/details/81181639