js实现无刷新表单提交文件，将ajax请求转换为form请求方法
最近在做项目的时候遇到一个需要上传文件的需求，因为ajax请求是无法上传二进制文件流的，所以只能用form表单提交，而form提交有一个问题就是会使页面刷新，本文解决了form表单提交文件时页面刷新的问题。
一、无刷新实现form提交文件
将form的target指向为一个iframe就可以实现无刷新提交文件了，但关键是还需要看到后台返回的数据，所以还需要为该iframe注册一个回调函数，因为iframe和该页面在同域内，所以可以在iframe里可以调用该回调函数，就可以看到后台返回的数据了。实例如下：
<body>
<form method="post" target="targetFrame" action="#" enctype="multipart/form-data" id="fileupId">
<input type="file" name="" id="">
</form> <script>
var ifmId = 'targetFrame';
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.style.display = "none";
iframe.contentWindow.name = ifmId;
iframe.id = ifmId; iframe.callback = function(json) {
success && success(json)
}
</script>
</body>
里面的js的作用主要是创建了一个iframe，并为iframe设置id和name，并为其注册回调函数。另外后台需要注意的有两点：
1.后台返回的数据类型应为html，否则无法在iframe里面显示，举个栗子：<html><script>frameElement.callback({test:'test'})</script></html>
，其中{test:test}应该是后台返回的数据；
2.ngix的http头应将x-Frame-Option设置为SAMEORIGIN，这样使页面可以在同域下能够被iframe调用；
这样一来，一个可以不刷新页面上传文件的功能就做好了，但是我们整个的系统都是ajax完成的，如果临时改成form可能改变很大，那么有没有有个方法可以不用一个个的去改，直接用一个方法就可以将所有的ajax上传的内容都改成form呢
二、动态转换所有数据到form表单内，并实现提交；
这个方法总的来说分为三步：1.在打开页面的时候遍历所有需要提交的输入框或者文件上传等内容，并将其每一个添加到动态创建的form表单之中；2.将其中的上传文件按钮绑定表单中的文件上传input；3.当用户点击提交的时候自动填充除了文件外其他的form表单，并提交表单，获取返回数据。
直接看代码：
var newForm = function(){
var conds = $('[data-cond]');
var formDom = $('<form method="post" style="display:none;" enctype="multipart/form-data" id="fileupId"></form>')
var textDom = $('<input type="text">');
var fileDom = $('<input type="file">');
conds.each(function(i, ele) {
var _ele = $(ele);
var key = _ele.data('cond').toString().trim();
if (_ele.hasClass('select')) {
//下拉框
formDom.append($('<input type="text">').attr('name',key));
}else if (_ele.hasClass('fileUp')) {
//文件
formDom.append($('<input type="file">').attr('name',key));
_ele.on('click',function(){
$("input[name="+ key +"]").click();
})
}else{
formDom.append($('<input type="text">').attr('name',key));
}
});
$('body').append(formDom);
formDom.delegate('input','change',function(){
var id = $(this).attr('name');
var files = $(this).get(0).files[0];
//判断文件类型
if(!/\.jpg$|\.jpeg$|\.gif|\.png$/ig.test(files.name)){
alert('请选择图片文件~')
return false;
}
//判断文件大小
if(files.size > 20480000){
alert('请上传20M内的文件~')
return false;
}
var name = files.name.replace(/(\w{10})(\w+)/,'$1..')
//文件名筛选只显示前10个字符
$('#'+id+'').text(name);
})
//formDom.hide();
}
这个方法的目的主要是为了动态创建一个表单，并为html文件中的上传文件按钮与form内的上传文件输入框绑定，实现选择文件的功能，另外还用正则实现了文件类型、大小的筛选并选择性显示文件名的前十个字符，其中$('#'+id+'')就是相应的上传文件按钮，另外为想转换为form表单内的内容的dom添加标签[data-cond="xxx"]，通过判断它的类来添加不同的Input。
var form = function(opt){
console.log()
var dom = opt.dom;
var success = opt.success || function() {};
var preUrl = eking.global.preUrl;
var postUrl = opt.postUrl || "";
var iframeName = opt.iframeName;
var conds = $('[data-cond]');
var consObj = {};
conds.each(function(i, ele) {
var _ele = $(ele);
var key = _ele.data('cond').toString().trim();
if (_ele.hasClass('select')) {
//下拉框
$("input[name="+ key +"]").val(_ele.data('select').getValue());
}else if (_ele.attr('type') == "text") {
//文本框
$("input[name="+ key +"]").val(_ele.val());
}else if (_ele.attr('type') == "password") {
//密码框
$("input[name="+ key +"]").val(_ele.val());
}else if (_ele.hasClass('span')){
$("input[name="+ key +"]").val(_ele.text());
}
});
dom.attr({
target: iframeName,
action: preUrl + postUrl
});
var ifmId = 'targetFrame';
var iframe = document.createElement("iframe");
document.body.appendChild(iframe);
iframe.style.display = "none";
iframe.contentWindow.name = ifmId;
iframe.id = ifmId;
iframe.callback = function(json) {
success && success(json)
$("#targetFrame").remove();
}
}
第二个函数就和我们一开始介绍的方法类似，不过将其进行了封装，添加了几个参数dom、success、preUrl、postUrl、iframeName，其中两个url是为了设置form表单提交的地址，dom则是在第一个函数中创建form表单，success则是数据传输后的回调函数。
在目标页面刚打开时调用第一个函数，当用户点击提交时，调用第二个函数就可以实现转换输入内容到form表单中并进行提交 :)
js实现无刷新表单提交文件，将ajax请求转换为form请求方法的更多相关文章
- DWZ框架Ajax无刷新表单提交处理流程
DWZ框架Ajax无刷新表单提交处理流程是: 1. ajax表单提交给服务器 2. 服务器返回一个固定格式json结构 3. js会调函数根据这个json数据做相应 ...
- 话说Form标签的target属性-----无刷新表单提交
国庆前(2013)无聊,就在铁道部的12306上“逛”了下下. PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知…… 首先是被“逛”的页面:票价查询. 之所以去逛,是因为一直 ...
- ajax+FormData+javascript实现无刷新表单信息提交
ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息 ,实例化表单数据对象 同时收集fm的表单域信息. var f ...
- ajax+FormData+javascript 实现无刷新表单注册
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- 传统表单提交文件上传，以及FormData异步ajax上传文件
传统的文件上传: 只用将form表单的entype修改成multipart/form-data,然后就可以进行文件上传,这种方式常用并且简单. 以下是另一种方式FormData,有时候我们需要ajax ...
- MVC下HtmlHelper自带BeginForm表单提交与异步Ajax请求
假如有一个数据表格UserInfo: public class UserInfo { public int Id { get; set; } public string Name { get; set ...
- Checkbox框全选操作，form表单提交与jquery ajax提交两种处理方式
//1.jquery ajax<script type="text/javascript"> $(function(){ var basePath = $(" ...
- 输入值/表单提交参数过滤有效防止sql注入的方法
输入值/表单提交参数过滤,防止sql注入或非法攻击的方法: 代码如下: /** * 过滤sql与php文件操作的关键字 * @param string $string * @return strin ...
- php+mysql 除了设置主键防止表单提交内容重复外的另一种方法
感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图 比如 ...
随机推荐
- 2013年的一些常用PHP資源整理下載
這些資源基本上都是一些免積分或只需要1個積分就能下載的資源,經過整理篩選最後分享給大家,希望大家喜歡: PHP手册(chm) http://download.csdn.net/detail/u0118 ...
- JS 清除字符串数组中,重复元素
<script language="JavaScript"> <!-- var arrData=new Array(); for(var i=0; i<10 ...
- GTD时间管理(3)---项目
一:什么是项目? 一个项目是由多步骤,多阶段组成的,不可能一步到位的. 项目分为可大可小. 魔兽世界这个程序是一个项目,是一个用10年开发的大型项目 搭建一个博客也可以成为一个项目,可以用一天时间去搭 ...
- 防止WordPress利用xmlrpc.php进行暴力破解以及DDoS
早在2012 年 12 月 17 日一些采用 PHP 的知名博客程序 WordPress被曝光存在严重的漏洞,该漏洞覆盖WordPress 全部已发布的版本(包括WordPress 3.8.1).该漏 ...
- centos7开启3306端口，liunx查看防火墙是否开启
Can't connect to MySQL server on localhost (10061)这个就属于下面要说的情况 启动服务 systemctl start mariadb.service ...
- 2014 Hangjs 见闻流水账第二天
前言 第一天传送门: 2014 Hangjs 见闻流水账第一天 写作风格跟第一天还是一样的. Slide 每个slide我都会根据自己的理解重新命名一次,用于表达自己的第一看法,主观意见,不喜可吐槽, ...
- ELK——在 CentOS/Linux 把 Kibana 3.0 部署在 Nginx 1.9.12
上一篇文章<安装 logstash 2.2.0.elasticsearch 2.2.0 和 Kibana 3.0>,介绍了如何安装 Logstash.Elasticsearch 以及用 P ...
- Putty & Ctrl+s 的魔咒
Long long ago“ 某些旧的”哑终端“会在发送过来的数据太多,显示速度跟不上时发送一个Ctrl+s让对方等一下,然后再准备好继续显示时发送一个Ctrl+q.Putty“兼容”了这个特性.也有 ...
- ubuntu16.04+opencv3.1配置
#安装必要的依赖sudo apt-get install build-essential cmakesudo apt-get install cmake Git libgtk2.0-dev pkg-c ...
- ORACLE自定义顺序排序-转
ORACLE可以借助DECODE函数,自定义顺序排序: select * from ( select 'Nick' as item from dual union all select 'Viki' ...