首先创建一个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. [Tex学习笔记]小于等于一个常数乘以...

    偏微分的论文中常用: 小于等于一个常数乘以... 这个要怎么输入呢. 只要输入\lesssim 就能得到 $\lesssim$...哈哈. 以前知道, 但是忘记了. 现在又要用.

  2. Design Principles and Design Patterns

    设计原则解读. 设计原则是对设计模式的约束性要求,属于设计中基本的四项特征,不符合此四项特征的设计,不具有生命力. 设计模式也是在此四项设计原则上的具体化实例化衍生物. Martin原文: http: ...

  3. nnet3配置中的上下文和chunk(块)大小

    Nnet3配置中的上下文和块大小 简介 本页讨论了nnet3配置中关于解码和训练的块大小以及左右上下文的某些术语.这将有助于理解一些脚本.目前,从脚本角度来看,没有任何关于nnet3的"概述 ...

  4. CentOS/Linux开放某些端口

    CentOS/Linux开放某些端口 CentOS/Linux 装载系统的时候只开启了少数端口如22,80(有些连80都没有开放)等. 结果再装完Nginx+PHP+MySQL 后不能访问网站. 当然 ...

  5. Java代码操作HDFS

    package com.hy.hdfs; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.fs.*; imp ...

  6. Ansible-----条件判断与错误处理

    when 在ansible中,条件判断的关键词是when --- - hosts: all remote_user: root tasks: - debug: msg: "System re ...

  7. Bmob后端云学习(未完)

    Bmob后端云学习 BaaS(后端即服务:Backend as a Service)公司为移动应用开发者提供整合云后端的边界服务. 这种服务的一个代表就是Bmob后端云,BAT和亚马逊 ,都有这类产品 ...

  8. C# 微信开发-----微信会员卡(三)激活会员卡

    在会员领取了会员卡之后需要做 一个跳转性激活,模式请看下图: 在创建会员卡的时候需要配置下这个参数的值: memberActivate.aspx页面代码如下: <%@ Page Language ...

  9. Java实现大数乘法运算

    基本思路:将输入的两个大数以字符串的形式存储,然后转化成整型数组存储,通过整型数组进行乘法运算(采用分治的思想) 即乘法分配律,如AB*CD=AC(AD+BC)BD,将两个数组逐位相乘的结果对位存放在 ...

  10. select2 api参数的文档

    具体参数可以参考一下: 参数 类型 描述 Width 字符串 控制 宽度 样式属性的Select2容器div minimumInputLength int 最小数量的字符 maximumInputLe ...