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. 如何用纯 CSS 创作一个方块旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/gjgyWm 可交互视频 ...

  2. 爬虫之scrapy工作流程

    Scrapy是什么? scrapy 是一个为了爬取网站数据,提取结构性数据而编写的应用框架,我们只需要实现少量代码,就能够快速的抓取到数据内容.Scrapy 使用了 Twisted['twɪstɪd] ...

  3. python3通过Beautif和XPath分别爬取“小猪短租-北京”租房信息,并对比时间效率(附源代码)

    爬虫思路分析: 1. 观察小猪短租(北京)的网页 首页:http://www.xiaozhu.com/?utm_source=baidu&utm_medium=cpc&utm_term ...

  4. LeetCode(215) Kth Largest Element in an Array

    题目 Find the kth largest element in an unsorted array. Note that it is the kth largest element in the ...

  5. Linux集群之高可用负载均衡lvs+keepalived

    LVS简介 LVS介绍 LVS是Linux Virtual Server的缩写,意即Linux虚拟服务器,是一个虚拟的服务器集群系统,属于4层负载均衡 ipvs和ipvsadm的关系 我们使用配置LV ...

  6. selenium2基本控件介绍及其代码

    输入框:input  表现形式:      1.在html中一般为:<input id="user" type="text"> 主要操作:    ...

  7. UOJ 152 汉诺塔 分治

    题目链接 题意: 有三根编号为\((1, \, 2, \, 3)\)的柱子,然后第一根柱子上有编号为\(1 \sim n(n \leq 10000)\)的盘子,从上到下第\(i\)个盘子的编号是\(A ...

  8. Nginx快速安装

    登录nginx官网,点击download 点击稳定版本 复制箭头上面的内容 vim /etc/yum.repos.d/nginx.repo 修改yum文件 将复制的内容粘贴上去 yum list | ...

  9. luogu2123 皇后游戏

    好题. 网上看到的范围是:\(T \leq 10\),$ n \leq 50000$, $ a_i,b_i \leq 10^9$. 我们按照贪心惯常的思路考虑交换相邻的两个人.容易发现,对于相邻的两个 ...

  10. 使mysql的表内容可以输入中文内容

    修改数据库的字符集mysql>use mydb mysql>alter database mydb character set utf8;