1、使用场景:需要使用ajax提交表单,但是提交的表单里含有附件上传

2、代码实现方式:

<!-- HTML代码 -->
<form method="post" action="" enctype="multipart/form-data" id="J-add-form">
<input type="file" name="qr_code" />
<a href="javascript:submitStoreInfo();">发布</a>
</form>
<!-- js代码 -->
<script>
function submitStoreInfo(){
var formData = new FormData(document.getElementById("J-add-form"));
$.ajax({
url:'xxx.php',
type:'post',
data:formData,
cache: false, // 设置为false,上传文件不需要缓存
processData: false, // 设置为false,因为data值是FormData对象,不需要对数据做处理
contentType: false, // 设置为false,因为是由<form>表单构造的FormData对象,且已经声明了属性enctype="multipart/form-data"
success:function(data){
oData = jQuery.parseJSON(data);
},
error:function(e){
alert('网络出错了!');
}
});
}
</script>
<!-- PHP接受上传文件数据 -->
<?php
$picData = $_FILES['qr_code'];
?> BY bjr Time:17:14:06

通过jQuery Ajax提交表单数据时同时上传附件的更多相关文章

  1. jquery ajax提交表单数据的两种方式

    http://www.kwstu.com/ArticleView/kwstu_201331316441313 貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职 ...

  2. Ajax 提交表单【包括文件上传】

    利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></ ...

  3. JQuery ajax提交表单及表单验证

    JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目   注:经过验证,formValidator只适合一个 ...

  4. Jquery ajax提交表单几种方法

    在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了,下面我来介绍两个提交表单数据的方法. ...

  5. Jquery ajax提交表单几种方法详解

    [导读] 在jquery中ajax提交表单有post与get方式,在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了,下面我来介绍两个提交表单数据的 ...

  6. 使用ajax异步提交表单数据(史上最完整的版本)

    额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我 ...

  7. Ajax提交表单数据(包含文件)

    1. 表单数据->JSON->后台 2. 表单序列化[方式一] jquery.serializejson.js <script src="/js/jquery.serial ...

  8. jQuery ajax 提交表单图片

    基于 jQuery HTML: <form id="form" enctype="multipart/form-data"> <input t ...

  9. jquery Ajax提交表单数据

    //表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#your ...

随机推荐

  1. python学习之判断和循环的使用

    作为一个小白运维,工作中常常发现很多东西还是自动化的好一点,所以就想到的用python来编写脚本.当然,我肯定是不会的啦,哈哈哈~~~~所以啦,身为一个懒癌晚期的上班族不得不在闲余时间来好好学学pyt ...

  2. jmeter接口测试 ——学习笔记

    JMETER常用操作 1.jmeter做http脚本 Http请求页面内容介绍 添加cookie 线程组-添加-配置元件--HTTP Cookie管理器 添加权限验证 不能使用普通用户修改学生金币,接 ...

  3. python之序列化

    什么叫序列化? 序列化是指把内存里的数据类型转变成字符串,以使其能存储到硬盘或通过网络传输到远程,因为硬盘或网络传输时只能接受bytes. 把字符转换成内存数据类型,叫反序列化. 为什么要序列化? 你 ...

  4. init_bootmem_node

    初始化pg_data_t->bdtat结构体, /* * node_bootmem_map is a map pointer - the bits represent all physical ...

  5. POJ:1330-Nearest Common Ancestors(LCA在线、离线、优化算法)

    传送门:http://poj.org/problem?id=1330 Nearest Common Ancestors Time Limit: 1000MS Memory Limit: 10000K ...

  6. BFS:UVa1590-IP Networks (子网掩码相关知识)

    IP Networks Alex is administrator of IP networks. His clients have a bunch of individual IP addresse ...

  7. Linux学习-Linux 的开机流程分析

    开机流程一览 系统开机的经过可以汇整成底下的流程的: 加载 BIOS 的硬件信息与进行自我测试,并依据设定取得第一个可开机的装置; 读取并执行第一个开机装置内 MBR 的 boot Loader (亦 ...

  8. JAVA里的别名机制

    别名现象主要出现在赋值的问题上: 对基本数据类型的赋值是很简单的.基本数据类型存储了实际的数值,而并非指向一个对象的引用,所以在为其赋值的时候,是直接将一个地方的内容复制到了另一个地方.例如,对基本数 ...

  9. BZOJ 4919: [Lydsy1706月赛]大根堆

    F[x][i]表示x的子树中取的数字<=i的最大值,线段树合并优化DP 写得很难看,并不知道好看的写法 #include<cstdio> #include<algorithm& ...

  10. selenium - 常用浏览器操作方法

    常用浏览器操作 (1)初始化浏览器会话: from selenium import webdriver driver = webdriver.Chrome() (2)浏览器最大化操作: driver. ...