如何通过jquery将表单数据与图像一起传递？ [复制]

Posted 2023-05-07

【中文标题】如何通过jquery将表单数据与图像一起传递？ [复制]

【英文标题】：How to pass form data along with image through jquery? [duplicate]

【发布时间】：2017-06-29 03:21:39

【问题描述】：

我想通过 jquery 将表单数据传递到 php 页面。现在我对通过 jquery 传递的图像以及它如何到达 php 页面有点困惑。

我的代码：

<script>
  $(document).ready(function() 
      $('form').submit(function(event)  //Trigger on form submit
        $('#name + .throw_error').empty(); //Clear the messages first
        $('#success').empty();

        var guestbookSendMessage =  //Fetch form data
          'name'  : $('input[name=name]').val(), //Store name fields value
        'msg': $('textarea[name=msg]').val()
         'file' :$("#fileInput")[0].files[0];
        ;

        $.ajax( //Process the form using $.ajax()
          type    : 'POST', //Method type
          url     : 'php/process.php', //Your form processing file url
          data    : guestbookSendMessage, //Forms name
          dataType  : 'json',
          success   : function(data) 

          if (!data.success)  //If fails
            if (data.errors.name)  //Returned if any error from process.php
              $('.throw_error').fadeIn(1000).html(data.errors.name); //Throw relevant error
            
           else 
              $('#success').fadeIn(1000).append('<p>' + data.posted + '</p>'); //If successful, than throw a success message
            
          
        );
          event.preventDefault(); //Prevent the default submit
      );
    );
</script> 

【参考方案1】：

您可以使用 File API 或 FormData 通过 ajax 将图像数据发送到您的服务器。选择什么由您决定，但由于 FormData 更容易实现，我将在此处使用 FormData 回答您的问题。

首先，您需要创建 FormData 容器并将数据附加到其中。只需修改您的代码

var guestbookSendMessage =  //Fetch form data
    'name': $('input[name=name]').val(), //Store name fields value
    'msg': $('textarea[name=msg]').val()
    'file': $("#fileInput")[0].files[0];
;

有了这个

var guestbookSendMessage = new FormData();

guestbookSendMessage.append('name', $('input[name=name]').val());
guestbookSendMessage.append('msg', $('textarea[name=msg]').val());
guestbookSendMessage.append('file', $("#fileInput")[0].files[0]);

现在在你的$.ajax中代替这个参数

dataType: 'json'

添加这两个

processData: false,
contentType: false

这将使您的数据得到正确解释。

现在在您的php/process.php 脚本中，您将在$_POST 超全局数组中获得'name' 和'msg'，在$_FILES 中获得'file'。

【参考方案2】：

var fdata       = new FormData();
var myform      = $('#prfform'); // specify the form element
var idata       = myform.serializeArray();
var document    = $('input[type="file"]')[0].files[0];
fdata.append('document[]', document);
$.each(idata,function(key,input)
    fdata.append(input.name,input.value);
);
$.ajax(
    url:"process.php",
    type: "POST",
    data: fdata,
    processData: false,
    contentType: false,
    beforeSend: function() 
        //something before send
    ,
    success:function(data) 
        //something after response
    
);

<form name="prfform" id="prfform" method="post" enctype="multipart/form-data">
    <!-- elements -->
</form>

请尝试此代码。 “enctype”在表单中很重要。 在ajax脚本中，给出“processData: false”和“contentType: false”

这可能会解决您的问题。