页面部分大概意思一下

 <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. 微信小程序域名配置问题

    最主要的:不能用ip地址,不能用localhost,域名要经过备案等 这些在 https://developers.weixin.qq.com/miniprogram/dev/framework/ab ...

  2. BOM—浏览器对象模型(Browser Object Model)

     1,javascript   组成部分: 1.ECMAscript(核心标准):    定义了基本的语法,比如:if for 数组 字符串 ... 2.BOM  : 浏览器对象模型(Browser ...

  3. 用 Weave Scope 监控集群 - 每天5分钟玩转 Docker 容器技术(175)

    创建 Kubernetes 集群并部署容器化应用只是第一步.一旦集群运行起来,我们需要确保一起正常,所有必要组件就位并各司其职,有足够的资源满足应用的需求.Kubernetes 是一个复杂系统,运维团 ...

  4. win10 iis注册.net framework 此操作系统版本不支持此选项。

    利用dism工具 执行下面命令才成功 dism /online /enable-feature /featurename:IIS-ISAPIFilter dism /online /enable-fe ...

  5. SQLServer之创建分布式事务

    分布式事务创建注意事项 指定一个由 Transact-SQL 分布式事务处理协调器 (MS DTC) 管理的 Microsoft 分布式事务的起点. 执行 BEGIN DISTRIBUTED TRAN ...

  6. RabbitMQ权限控制原理

    我们在使用MQ搭建系统的时候,经常要开放队列给外接系统访问.外接系统的稳定性是不可控的.为了防止外接系统不稳定导致误操作破坏了MQ的配置或数据,需要对MQ做比较精细的权限控制. 我的需求是这样的: 我 ...

  7. 9102 IT人保持记忆力及健康的方法

    做技术时间久了,我们会发现有的时候我们会感觉记忆力衰减太快,前脚刚忙完的事或者刚做完计划任务没多久就遗忘了,或者是以前轻车熟入的方法死活都记不起来了,亦或者之前学习一门技术很快就掌握真谛,现在即便花N ...

  8. 利用java实现excel转pdf文件

    在有些需求当中我们需要抓取字段并且填充到excel表格里面,最后将excel表格转换成pdf格式进行输出,我第一次接触这个需求时,碰到几个比较棘手的问题,现在一一列出并且提供解决方案. 1:excel ...

  9. GitHub的初级使用

    最近准备学习一个GitHub的使用 一.账号创建 1.百度找到GitHub官方网站(https://github.com/ ) 2.点击Sign up注册GitHub账号 下图为注册页面 第一步:填写 ...

  10. 用Angular部署Cesium

    用到的集成开发环境是WebStrom,Cesium版本是1.50.0,Angular版本是6.2.4  1.首先我们安装cesium,在webstorm中的Termianl中输入 npm instal ...