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

Posted 2020-10-25 WidgetBox

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