通过jQuery Ajax提交表单数据时同时上传附件

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

原文地址:https://www.cnblogs.com/widgetbox/p/8489448.html

时间: 2024-10-09 19:56:16

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

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

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

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

利用js插件实现 <script src="@Url.Content("~/js/layer/jquery.form.min.js")"></script> 实例代码 前端: @using WebSearch.EFDB; @{ ViewBag.Title = "UploadFeeCertificate"; NoveltyProxy proxy = ViewData["Proxy"] as Novelty

JQuery ajax提交表单及表单验证

JQuery ajax提交表单及表单验证 博客分类: jsp/html/javascript/ajax/development Kit 开源项目 注:经过验证,formValidator只适合一个页面不超过一个表单的情况. 本例实现功能:通过ajax提交表单,并在提交表单前对表单的数据进行验证. 主要通过两个插件实现: 第一个: jQuery Form Plugin http://jquery.malsup.com/form 主要功能是ajax提交表单 第二个:jQuery formValida

前端笔记-jquery ajax提交表单

jquery ajax提交表单 最近才发现,jquery ajax提交表单可以这么简单 $.ajax({ url: "udpate", type:"POST", data:$('#formId').serialize(), success: function(data){ alert(data); }, error:function(data){ }}); } 关键在于data:$('#formId').serialize(),这里的formId就是表单的Id. 以

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

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

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

额 为啥用这个 不用form呢,因为这个效率高,而且在浏览器中运行程序的时候如果出现bug的话,页面不会显示显示错误信息,提高了用户的体验度. 那么,就来看看把,先给数据库表截个图哈 然后写项目被 我的目录结构 然后 看代码呗 conn.php <?php [email protected]_connect("localhost","root","root")or die("mysql连接失败!");@mysql_sel

ajax提交表单数据不跳转

1.onsubmit form表单的onsubmit方法在submit执行之前提交表单 <script type="text/javascript"> function sub() { // jquery 表单提交 $("#formId").ajaxSubmit(function(message) { // 对于表单提交成功后处理,message为返回内容 }); return false; // 必须返回false,否则表单会自己再做一次提交操作,并且

jquery Ajax提交表单数据

//表单中控件的name要和实体类字段属性一致 $.ajax({ cache: true, type: "POST", url:ajaxCallUrl, data:$('#yourformid').serialize(),// 你的formid async: false, error: function(request) { alert("Connection error"); }, success: function(data) { $("#common

jquery ajax 提交表单(file &amp;&amp; input)

用到的插件 jquery.js jquery.form.js[http://malsup.github.io/jquery.form.js] 提交页面 <form enctype="multipart/form-data" id="onlineservice_leave_message_form"> <div class="cls"> <label for="mail"> <span