`
恋上你的味道
  • 浏览: 100527 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

javascript实现异步提交表单或上传文件

阅读更多
用来异步提交表单或上传文件
使用iframe模仿ajax
代码如下:
/**
 * 用于异步提交表单
 * @author Long
 * @returns AsyncForm 
 */
var AsyncForm = (function() {
	/**
	 * @param options
	 * @param callback
	 * @returns
	 * @desc 创建iframe
	 */
	var iframe = function(options) {
		options = options || {
			id : 'iframe' + Math.random(),
			name : 'iframe',
			src : ''
		};
		var iframe;
		try {
			iframe = document.createElement('<iframe name=' + options.name+ '>');
		} catch (e) {
			iframe = document.createElement('iframe');
			iframe.name = options.name;
		}
		options.id && (iframe.id = options.id);
		iframe.src = options.src;
		iframe.style.cssText = options.cssText;
		return iframe;
	};
	var getDoc = function(frame) {
		var doc = frame.contentWindow ? frame.contentWindow.document
				: frame.contentDocument ? frame.contentDocument
						: frame.document;
		return doc;
	}

	/**
	 * @param {form}
	 * @return {}
	 * @desc 上传文件
	 */
	function AsyncForm(form) {
		var uuid = AsyncForm.uuid++;
		this.state = 0;
		this.form = form;
		this.file=form;
		var name = 'upload_file_' + uuid;
		this.iframe = iframe({
			name : name,
			src : 'javascript:;',
			cssText : 'display:none;'
		});
		document.body.appendChild(this.iframe);
		this.form.target = name;
	};
	var callbackFunction;//回调函数
	/**
	 * 处理返回值,执行回调函数
	 * @param {e} 事件对象
	 */
	var cb=function (e){
		var doc = getDoc(this);
		var docRoot = doc.body ? doc.body : doc.documentElement;
		var responseText=eval("(" + docRoot.innerHTML + ")");
		callbackFunction(responseText,e);
		document.body.removeChild(this);
	}
	AsyncForm.uuid = 0;
	AsyncForm.prototype = {
		checkState : function() {
			var up = this;
			var iframe = getDoc(this.iframe);
			var state = iframe.readyState;//获取iframe的状态
			//检测iframe的初始化状态,若未初始化则继续检测直到初始化完成
			if (state && state.toLowerCase() == 'uninitialized')
				setTimeout(function() {up.checkState.apply(up)}, 50);
		},
		submit : function(callback) {
//			return false;
			callbackFunction=callback;
			var  async= this;
			//兼容IE,IE中load事件中的this指向window,使用apply指定回调函数的this对象为iframe
			if (this.iframe.attachEvent)
				this.iframe.attachEvent('onload',function(e){cb.apply(async.iframe, [e])});
			else//兼容非IE浏览器,this对象指向被绑定者本身
				this.iframe.addEventListener('load',cb, false);
			//检测iframe的状态,
			//setTimeout中执行function的this对象指向window,使用apply将function的this指向AsyncForm的实例
			setTimeout(function() {async.checkState.apply(async)}, 15);
			this.form.submit();
		},
		readyState : function() {
			return this.state;
		},
		cancel : function() {
		}
	};
	return AsyncForm;
})();



调用很简单,一句话:
new AsyncForm(form).submit(function(responseText,e){
				alert(responseText);
				window.location.href=window.location.href;
});

responseText是返回值,可以是String ,int,json 任意类型的值
这里的参数“form”是表单dom对象,submit方法的参数是一个回调函数。
今后会加入一些不使用表单直接上传文件的功能,尽请期待。
如果哪位有更好的建议欢迎提意见
1
0
分享到:
评论

相关推荐

    【JavaScript源代码】JavaScript实现异步获取表单数据.docx

     本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下 在上一篇文章中讲到了使用JavaScript异步提交表单中的数据,那么今天我们就讲讲利用JavaScript异步获取表单中的数据;...

    JQuery异步提交表单与文件上传功能示例

    本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件。 示例如下: index.html &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&...

    javascript将异步校验表单改写为同步表单.docx

    javascript将异步校验表单改写为同步表单.docx

    纯javascript的ajax实现php异步提交表单的简单实例

    当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L...

    javascript方式防止表单重复提交

    javascript方式防止表单重复提交,

    Javascript异步表单提交,图片上传,兼容异步模拟ajax技术

    使用Javascript异步表单提交,图片上传,兼容异步模拟ajax技术,需要的朋友可以参考下。

    js使用formData实现批量上传

    利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...

    JavaScript实现的可视化表单设计器源码.zip

    JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 一键预览配置的效果 一键生成...

    javascript将异步校验表单改写为同步表单

    主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下

    jQuery实现文件编码成base64并通过AJAX上传的方法

    使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...

    jquery使用FormData实现异步上传文件

    来添加文件,并实现上传功能。传统的上传文件是将&lt;input&gt;放到&lt;form&gt;中提交,但在这个场景中并不存在form表单,只有一个input而已。那么应该如何处理呢? 答案是可以使用FormData来实现文件的提交。 先看...

    原生JavaScript实现Ajax异步请求

    在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算...

    ajax异步批量上传文件demo

    这个是使用JavaScript中FormData格式化表单数据使之成为key/value,使用ajax异步上传数据的demo。 包含html和服务端解析数据并保存文件

    Dropzone.js实现文件拖拽上传实例

    dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单,...

    AjaxUploadFile:异步传输上传文件javascript库

    AjaxUploadFile异步传输上传文件javascript库主文件:AjaxUploadFile.js###功能: 1.单文件上传 2.多文件上传 3.普通数据提交 4.可选返回数据json(默认),xml,text 5.支持XMLHttpRequest大多数事件 6.上传超时设置 7...

    php图片异步上传

    此外,基于表单上传在流行的Ajax应用程序面前显得过时了。我们可以使用flash解决这个问题, 但实际上JavaScript也能做的很出色。 Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来...

    leovuevalidator一个基于vue2异步的表单验证组件

    leo-vue-validator一个基于vue2异步的表单验证组件

Global site tag (gtag.js) - Google Analytics