javascript - Jquery Ajax文件上传完成函数

Question

这个问题已经有答案了:

Can I use jquery post with image uploads? (1 个回答)

已关闭 7 年前。

我有以下代码来使用 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>

脚本

$(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 作为上传的图像。