用来异步提交表单或上传文件
使用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方法的参数是一个回调函数。
今后会加入一些不使用表单直接上传文件的功能,尽请期待。
如果哪位有更好的建议欢迎提意见
分享到:
相关推荐
本文实例为大家分享了JavaScript实现异步获取表单数据的具体代码,供大家参考,具体内容如下 在上一篇文章中讲到了使用JavaScript异步提交表单中的数据,那么今天我们就讲讲利用JavaScript异步获取表单中的数据;...
本文实例讲述了JQuery异步提交表单与文件上传功能。分享给大家供大家参考,具体如下: Jquery.form.js是一个可以异步提交表单及上传文件的插件。 示例如下: index.html <!DOCTYPE html> <html> <head&...
javascript将异步校验表单改写为同步表单.docx
当然,jquery可以实现异步提交表单,jquery.form.js这个库貌似也挺流行 只是有时候并不想使用额外的库,所以就琢磨着自己写,用纯js来实现异步提交表单 实现如下(本例用POST方式提交,用php作为服务器脚本) HTM L...
javascript方式防止表单重复提交,
使用Javascript异步表单提交,图片上传,兼容异步模拟ajax技术,需要的朋友可以参考下。
利用FormData对象,我们可以通过JavaScript用一些键值对来模拟一系列表单控件,我们还可以使用XMLHttpRequest的send()方法来异步的提交这个”表单”.比起普通的ajax,使用FormData的最大优点就是我们可以异步上传一个二...
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器,让表单开发简单而高效。 特性如下: 可视化配置页面 提供栅格布局,并采用flex实现对齐 一键预览配置的效果 一键生成...
主要介绍了javascript将异步校验表单改写为同步表单,需要的朋友可以参考下
使用AJAX是无法直接上传文件的,一般都是新建个iframe在它里面完成表单提交的过程以达到异步上传文件的效果。 如此做可以达到比较好的浏览器兼容性,不过代码量会比较大,即使是使用了文件上传插件,例如plupload。 ...
来添加文件,并实现上传功能。传统的上传文件是将<input>放到<form>中提交,但在这个场景中并不存在form表单,只有一个input而已。那么应该如何处理呢? 答案是可以使用FormData来实现文件的提交。 先看...
在前端页面开发的过程中,经常使用到Ajax请求,异步提交表单数据,或者异步刷新页面。 一般来说,使用Jquery中的$.ajax,$.post,$.getJSON,非常方便,但是有的时候,我们只需要ajax功能,这样引入Jquery比较不划算...
这个是使用JavaScript中FormData格式化表单数据使之成为key/value,使用ajax异步上传数据的demo。 包含html和服务端解析数据并保存文件
dropzone.js是一个开源的JavaScript库,提供 AJAX 异步文件上传功能,支持拖拽文件、支持最大文件大小、支持设置文件类型、支持预览上传结果,不依赖jQuery库。 使用Dropzone 我们可以建立一个正式的上传form表单,...
AjaxUploadFile异步传输上传文件javascript库主文件:AjaxUploadFile.js###功能: 1.单文件上传 2.多文件上传 3.普通数据提交 4.可选返回数据json(默认),xml,text 5.支持XMLHttpRequest大多数事件 6.上传超时设置 7...
此外,基于表单上传在流行的Ajax应用程序面前显得过时了。我们可以使用flash解决这个问题, 但实际上JavaScript也能做的很出色。 Ajax Upload文件上传插件允许你上传多个插件而无需刷新页面,可以使用任何的元素来...
leo-vue-validator一个基于vue2异步的表单验证组件