Question

我想通过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>

Answer 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脚本中，'name'超全局数组中的'msg'和$_POST以及'file'中的$_FILES将获得<。{1}}。 / p>

Answer 2

{{1}}

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

这可能会解决您的问题。

如何通过jquery传递表单数据和图像？

2 个答案: