首先创建一个formData,其中参数,就是你的form表单,jquery要加0,也可以用document.querySelector("form")得到

var formData = new FormData($("form")[0]);

接着就是异步上传了,其中一定要设置两个值为falese,就是下面的contentType和processData,使之可以上传文件,并不要转成字符串形式,这也是为什么要用$.ajax而不用$.post的原因

$.ajax({
url: "/base/test",
type: 'POST',
data: formData,
contentType: false,
processData: false,
success: function (returndata) {
console.log(returndata);
},
error: function (returndata) {
console.log(returndata);
}
});

上面的url,自行设置,是你要处理的链接。使用这种方法的好处就是不用通过FileReader读取,再转换数据!不过为了实时显示图片,也可以结合filereader使用

jquery运用FormData结合Ajax异步上传表单,超实用的更多相关文章

  1. html5图片异步上传/ 表单提交相关

    1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archiv ...

  2. Ajax同时上传表单序列化参数+自定义参数

    $.ajax({ type:'POST', url :"<{:U('jiuzhu/edit')}>", data:$.param({'name1':value1,'na ...

  3. html5+php实现文件的断点续传ajax异步上传

    html5+php实现文件的断点续传ajax异步上传 准备知识:断点续传,既然有断,那就应该有文件分割的过程,一段一段的传.以前文件无法分割,但随着HTML5新特性的引入,类似普通字符串.数组的分割, ...

  4. 基于Flask开发网站 -- 前端Ajax异步上传文件到后台

    大家好,我是辰哥~ 辰哥最近利用空闲时间在写一个在线可视化平台,过程中也觉得一些技术还是比较有意思的,所以就以模块化的形式分享出来.如:从网页界面(前端)上传文件到服务器(后端). 放一下该模块的界面 ...

  5. java使用xheditor Ajax异步上传错误

    java使用xheditor Ajax异步上传时候错误如下:the request doesn't contain a multipart/form-data or multipart/mixed s ...

  6. Spring使用ajax异步上传文件

    单文件上传 <!-- 创建文件选择框 --> 文件上传 :<input type="file" id="file" name="fi ...

  7. ajax异步上传文件和表单同步上传文件 的区别

    1. 用表单上传文件(以照片为例)-同步上传 html部分代码:这里请求地址index.php <!DOCTYPE html> <html lang="en"&g ...

  8. 利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载

    利用struts2进行单个文件,批量文件上传,ajax异步上传以及下载 1.页面显示代码 <%@ page language="java" import="java ...

  9. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比

    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...

随机推荐

  1. Spring Security 之方法级的安全管控

    默认情况下, Spring Security 并不启用方法级的安全管控. 启用方法级的管控后, 可以针对不同的方法通过注解设置不同的访问条件. Spring Security 支持三种方法级注解, 分 ...

  2. Linux Socket I/O

    Ref: 一文读懂Socket通信原理 幽默讲解 Linux 的 Socket IO 模型

  3. nnet3 TDNN chunk, left-context, right-context

    chunk-width 数据块的宽度 NnetIo name=="input" indexes,left-context+num-frame+right-context=5+7+6 ...

  4. [Kubernetes]编排其实很简单

    什么是编排 Kubernetes中,我们总是在说一个概念:编排. 在[Kubernetes]谈谈Kubernetes的本质这篇文章中,关于"编排"的概念介绍了一下:过去很多集群管理 ...

  5. python 打印Linux中文编码字符

    2018-10-12 12:02:15 星期五 python -c "print '\346\234\215\345\212\241\345\231\250\346\217\220\344\ ...

  6. Gin 路由解析树详解

    说明: 无意间看到gin 中有trees的属性,好奇想一探究竟,到底gin是怎样生成路由解析树的? 这是一个测试截图,图中大概可以了解到gin是怎样做路由解析的.配合源码的阅读,解析树大致如下: 通过 ...

  7. 【原创】大叔问题定位分享(27)spark中rdd.cache

    spark 2.1.1 spark应用中有一些task非常慢,持续10个小时,有一个task日志如下: 2019-01-24 21:38:56,024 [dispatcher-event-loop-2 ...

  8. VUE 导出Excel(iframe)

    1. 概述 1.1 说明 在开发过程中,有时候需要导出某数据表格(excel)以便客户使用,使用iframe对返回二进制文件进行下载处理.记录此功能,以便后期使用. 2. 示例 2.1 vue示例代码 ...

  9. nginx优化之keepalive

    一.nginx之tcp_nopush.tcp_nodelay.sendfile 1.TCP_NODELAY你怎么可以强制 socket 在它的缓冲区里发送数据?一个解决方案是 TCP 堆栈的 TCP_ ...

  10. ELK统一日志系统的应用

    收集和分析日志是应用开发中至关重要的一环,互联网大规模.分布式的特性决定了日志的源头越来越分散, 产生的速度越来越快,传统的手段和工具显得日益力不从心.在规模化场景下,grep.awk 无法快速发挥作 ...