页面部分大概意思一下

 <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. Design Mobile实现国际化

    参考:https://mobile.ant.design/components/locale-provider-cn/   

  2. js 颜色16进制转RGB方法

    //颜色16进制转RGB方法 String.prototype.colorRgb = function(){ var sColor = this.toLowerCase(); //十六进制颜色值的正则 ...

  3. 等价路由在路由器和CE交换机上默认的行为是不同的,路由器总是走第一个下一跳,CE交换机是逐包。

    结论: 1.在eNSP中实验,路由器和CE交换机对于等价路由的默认转发行为是不同的, 路由器:默认是基于流的转发形态,更准确的来讲,ping两个不同的下一跳,都是走等价路由的第一个路由,不走第二条路由 ...

  4. Android入门第一课之Java基础

    通知:由于本周六场地申请没通过,所以本周的培训临时取消. 今天给大家带来的是Android入门的第一课,由于教室申请的不确定性,因此,每次培训的内容都会在博客先提前释放出来.首先Android的APP ...

  5. URL中包含url参数,(文件路径作为参数)

    用encodeURIComponent方法,把路径放在里面,可以防止斜杠被取消. 以下attachfiles是我的一个文件的绝对路径. window.location.href="${pag ...

  6. WPF:DropShadowEffect 生效

    1.BorderThickness = “XX”,xx可以当作阴影四周的宽度 2.BorderBrush="Transparent"

  7. 牛客网:java入门实现遍历目录

    项目介绍 遍历目录是操作文件时的一个常见需求.比如写一个程序,需要找到并处理指定目录下的所有JS文件时,就需要遍历整个目录.该项目教会你如何使用流式编程和lambda表达式,帮助你进一步熟悉java8 ...

  8. 委托学习总结(一)浅谈对C#委托理解

    初入社会,对于我这个初级程序员来说要学的东西实在太多了,公司最近在做一个winform框架开发的桌面应用程序,众所周知,winform也好,webform也好,里面随处可见的事件驱动,有事件,当然也少 ...

  9. SQL Server数据库————连接查询和分组查询

    SQL Server数据库————连接查询和分组查询 分组查询 select 列from  <表名> where  …… group by  列 注意:跟order  by一样group ...

  10. 【原】Java学习笔记019 - 面向对象

    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 仔细想一想,Ani ...