页面部分大概意思一下

 <form method="post"  enctype="multipart/form-data">
...
</form>

axios部分代码以vue示例:

//提交表单
onSubmit(e) {
e = e || event;
e.preventDefault();
let self = this;
let formData = new FormData();
formData.append("idCard", self.cardImageFile);//文件
formData.append("idType", "1");
formData.append("idNumber", self.cardNo); let config = {
headers: {
"Content-Type": "multipart/form-data"
}
};
self.$http.post("/upload", formData, config).then(
function(response) {
if (response.data.code == 200 && response.data.success) {
/*这里做处理*/
}
},
response => {}
);
},

文件在onchange事件里面取file

无刷新提交表单到此就结束了

axios页面无刷新提交from表单的更多相关文章

  1. 简单方法实现无刷新提交Form表单

    前几天遇到一个前端的问题.我希望提交表单后页面不跳转且不刷新当前页面,然而查了很多方法都没有解决. 由于Form 是提交后一定刷新页面的,所以我们可以用一个折中的办法.我们给Form 指定一个ifra ...

  2. DEDE使用AJAX无刷新提交Form表单,PHP返回结果

    $query = "INSERT INTO `{$diy->table}` (`id`, `ifcheck` $addvar)  VALUES (NULL, 0 $addvalue); ...

  3. ajax无刷新方式收集表单并提交表单

    ajax无刷新方式收集表单有两种方式, 一个是使用html5的FormData.一个是传统的方式. 一,FormData,在主流的浏览器中可以用,IE不好用啊. 另外,FormData使用有两个条件, ...

  4. 使用iframe实现页面无刷新提交表单

    iframe提交表单其实比ajax要方便一些,当然ajax也有ajax的好处,只是ajax编码处理有时有些麻烦,虽然经过转码是可以解决中文问题,但如果直接使用iframe不存这些问题了,下面来看看. ...

  5. form表单target的用法,实现无刷新提交页面

    form表单的target,当将iframe设置为隐藏时,可以实现当前页表单提交而不进行跳转刷新.代码如下,首页在页面里准备一个form表单和一个iframe. <form action=&qu ...

  6. 表单 - Form - 无刷新提交原理

    为什么Form组件的表单提交可以做到无刷新? EasyUI在提交的时候,将表单作为一个隐藏的iframe进行的提交,并不是我们看到的那个表单进行的提交 并且那个iframe使用了绝对定位,保证页面上不 ...

  7. HTML无刷新提交表单

    通常对于无刷新提交表单,我们都是运用ajax实现的.前段时间跟着老大了解到另一种无刷新提交表单的方法,是利用iframe框架实现的.现在整理出来分享给大家. 第一种: (html页面) <!DO ...

  8. iframe实现面页无刷新提交表单

    一.表单提交到了哪里? 这似乎是个无知的问题,我们都知道表单提交到服务器,java,php,asp等服务器,然后由服务器去读.那么之后呢,服务器总要返回点什么吧,要么返回 一个xml或json数据,要 ...

  9. jQuery实现form表单基于ajax无刷新提交方法详解

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

随机推荐

  1. Ext中setVersion和getVersion

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. Ext.extend

    Ext.extend:老版本的定义类,单继承 有两种使用方法,具体见附件中的Extend1.html和Extend2.html 附件如下: Ext.extend.zip

  3. HTML和CSS前端教程05-CSS盒模型

    目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility ...

  4. Easyui datagrid combobox输入框非法输入判断与事件总结

    datagrid combobox输入框非法输入判断与事件总结 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 常见事件 onSelect // 选择下拉列表 ...

  5. <jsp:useBean>、<jsp:setProperty>与<jsp:getProperty>

    <jsp:useBean>标签 会调用java对象的无参构造方法,来创建实例. <jsp:useBean>标签是用来搭配JavaBean元件的标准标签,这里指的JavaBean ...

  6. C#中Skip和Take的用法

    Skip()和Take()方法都是IEnumerable<T> 接口的扩展方法,包括C#中的所有Collections类,如ArrayList,Queue,Stack等等,还有数组和字符串 ...

  7. EOS开发实战

    EOS开发实战   在上一篇文章<EOS开发入门>中,我们为大家介绍了EOS的节点启动和合约部署和调用等入门知识.本次我们来实现一个复杂的例子,可以为其取一个高大上的名字-悬赏任务管理系统 ...

  8. deepin 15.8桌面系统

    深度桌面环境是深度科技自主开发的美观易用.极简操作的桌面环境,主要由桌面.启动器.任务栏.控制中心.窗口管理器等组成,系统中预装了 WPS Office.搜狗输入法.有道词典.网易云音乐以及深度特色应 ...

  9. LVS+Keepalived实现mysql的负载均衡

    1 初识LVS:Linux Virtual Server 1.1 LVS是什么       LVS是Linux Virtual Server的简称,也就是Linux虚拟服务器, 是一个由章文嵩博士发起 ...

  10. Too many open files问题解决

    项目运行过程出现如下问题 经查询,找出原因,并进行解决 具体原因如下: too many open files(打开的文件过多)是Linux系统中常见的错误,从字面意思上看就是说程序打开的文件数过多, ...