Question

我有以下代码使用jQuery Ajax提交表单：

HTML

<form id="note_form" action="upload_note.php" enctype="multipart/form-data">
  <input id="note_title" />
  <textarea id="note_text"></textarea>
  <input type="file" id="image" multiple="false" accept="image/*" />
</form>

脚本

<script>
 $(document).ready(function () {
     $('#note_form').on("submit", function (e) {
            e.preventDefault();
            var $form = $(this),
                url = $form.attr('action');
            var posting = $.post(url, {
                title: $("#note_title").val(),
                text: $("#note_text").val()
            });
            posting.done(function (response) {
                alert(response);
            });
     });
});
</script>

PHP

$title = $_POST['title'];
$text = $_POST['text'];
//$image = $_POST['image'];
echo $title;

代码工作正常，但我不知道如何使用此函数将图像发送到服务器。

修改

HTML

<form id="note_form" enctype="multipart/form-data">
   <input name="note_title" />
   <textarea name="note_text"></textarea>
   <input type="file" name="image" multiple="false" accept="image/*" />
</form>

SCRIPT

$(document).ready(function () {
        $('#note_form').on("submit", function (e) {
        e.preventDefault();
        var url = "upload_note.php";
        var formData = new FormData($(this)[0]);

        $.ajax({
             url: url,
             type: 'POST',
             dataType: "json",
             data: formData,
             contentType: false,
             processData: false,
             success: function (data) {
                 alert(data);
             }
         });
      });
});

PHP

$title = $_POST['note_title'];
echo $title;

Answer 1

您可以使用类似的东西，因此您只需在输入HTML元素中设置属性名称，并在PHP中使用$ _POST获取它们。这样，Ajax将发送表单中的所有信息。

$('#note_form').on('submit',function(e){
    e.preventDefault();
    var formData = new FormData($(this)[0]);

    $.ajax({
      url: 'PATH_TO_YOUR_PHP',
      type: 'POST',
      dataType:"json",
      data:formData,
      contentType: false,
      processData: false,
      success: function(data) {

                // .success stuff here

        }
    });

});

因此，在您的表单中，您将使用属性名称（例如：id's，而不是使用<input name="note_text" />，而在PHP文件中使用$_POST["note_text"]和$_FILES }用于上传的图片。

Jquery Ajax文件上传完成功能

1 个答案: