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. vue 使用lib-flexable,px2rem 进行移动端适配 但是引入的第三方UI组件 vux 的样式缩小,解决方案

    最近在写移动端项目,就想用lib-flexable,px2rem来进行适配,把px转换成rem但是也用到了第三方UI组件库vux,把这个引入发现一个问题就是vux的组件都缩小了,在网上找不到答案,最后 ...

  2. constraint the design

  3. linux学习-用户的特殊 shell 与 PAM 模块

    特殊的 shell, /sbin/nologin 『无法登入』指的是:『这个使用者无法使用 bash 或其他 shell 来登入系统』而已, 并不是说这个账号就无法使用其他的系统资源! 让某个具有 / ...

  4. App架构经验总结

    作者:李纪钢,网名 Keegan小钢,博客地址:http://keeganlee.me.目前在广州日报新媒体有限公司,负责移动产品的研发工作. 关于:本文整理自CSDN架构主题月子活动金牌架构师微课堂 ...

  5. JAVA 消耗 CPU过高排查方法

    #找出cpu占用最高的进程top -H#再次确定进程ps aux|grep 17408 #查看进程的线程(tid) ps -mp 17408 -o THREAD,tid,time#将线程转换为十六进制 ...

  6. OpenSSL SNI

    网站ssl检测工具 https://www.ssllabs.com/ssltest/analyze.html?d=gggl.houseoflux.com.cn https://myssl.com/  ...

  7. luogu4016 负载平衡问题

    网络流不用动脑子的好爽啊 #include <iostream> #include <cstring> #include <cstdio> #include < ...

  8. webdriver高级应用- 使用Chrome浏览器自动将文件下载到指定路径

    #encoding=utf-8 from selenium import webdriver import unittest, time class TestDemo(unittest.TestCas ...

  9. 关于面试总结-SQL学生表

    前言 每次面试必考SQL,小编这几年一直吃SQ的亏,考题无非就是万年不变学生表,看起来虽然简单,真正写出来,还是有一定难度.于是决定重新整理下关于SQL的面试题,也可以帮助更多的人过SQL这一关. 作 ...

  10. day04_09 while循环03

    练习题: 3.如何输入一个如下的直角三角形,用户指定输出行数:(如果上下反转,右如何实现?) ********** 以下是自己的思路,没有按照上课老师的思路,反正经过不断的测试改进得出的算法 num ...