页面部分大概意思一下

 <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. 20190325-HTML框架、audio标签、vedio标签、source标签、HTML表单

    目录 1.HTML框架 frameset:框架标记 frame:框架内文件 iframe:内嵌框架 2.audio标签 src:URL(可以用source标签替代) autoplay:自动播放 pre ...

  2. vue2.x 下载后台传过来的流文件(excel)后乱码问题

    1.接口返回的流和头部: 2.下载流文件的代码 方法一:是用了插件 https://github.com/kennethjiang/js-file-download 方法二:是用了 blob 不管哪种 ...

  3. 从.Net到Java学习第八篇——SpringBoot实现session共享和国际化

    从.Net到Java学习系列目录 SpringBoot Session共享 修改pom.xml添加依赖 <!--spring session--> <dependency> & ...

  4. rxjava切换线程避免重复代码

    .subscribeOn(Schedulers.io()) .unsubscribeOn(Schedulers.io()) .observeOn(AndroidSchedulers.mainThrea ...

  5. (办公)json报错的解决问题的小经验.

    经验:一半,一半的查,看那一段报错,当确定这一步的时候,用最笨的方法,用眼去看,出哪里的错误. 看有没有替换特殊字符的方法,去整理.

  6. 用idhttp打开网页或下载文件时如何显示进度

    在它的workbegin work事件中写代码 procedure TfrmDownLoad.IdHTTP1WorkBegin(Sender: TObject;   AWorkMode: TWorkM ...

  7. 关于Java中IO流的练习

    练习一:统计一个文件calcCharNum.txt中字母‘A’和'a'出现的总次数. package com.test; import java.io.File; import java.io.Fil ...

  8. Maven的简单使用

    Maven使用 在官网下载maven: http://maven.apache.org/download.cgi 解压到D盘(位置随便) 配置环境变量 打开dos窗口,检测是否成功,出现如下画面表示配 ...

  9. 【Linux基础】grep命令

    1.简介 grep是一种强大的文本搜索工具,它能使用正则表达式搜索文本,并把匹配的行打印出来. 命令格式:grep [option] pattern file 2.常用参数与举例: -e :  使用P ...

  10. ASP.NET基础知识汇总之WebConfig各节点介绍

    web.config虽然一直用,接触最多的也就是节点appSettings和connectionSettings,今天系统的梳理一下,了解一下webconfig各个节点的含义,先简单的浏览一下具体的w ...