Jquery Ajax文件上传完成功能[重复]答案

【问题标题】：Jquery Ajax File Upload Done Function [duplicate]Jquery Ajax文件上传完成功能[重复]
【发布时间】：2015-08-18 23:44:54
【问题描述】：

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

【问题讨论】：

也许这可以帮助你：stackoverflow.com/questions/17934689/…
应该在PHP的$_FILES数组中，你可以使用move_uploaded_file()把它放到你想要的目录下。 php.net/manual/en/function.move-uploaded-file.php
@mark.hch 我知道如何在服务器上接收数据，我的问题是仅在客户端发送数据。我只是无法使用完成功能弄清楚它
为什么要在.done函数中使用？就不能成功吗？
@WilliamXavier 我没有偏好，你能告诉我怎么做吗？抱歉，我是新手

标签： javascript php jquery ajax file-upload

【解决方案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

        }
    });

});

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

【讨论】：

我试过了，但是这个没有提交！
你能说明你是如何使用代码和你的 PHP 代码的吗？
不要忘记将名称属性也应用于您的文件输入类型，如果您不使用名称属性，您就不会发送图像：<input type="file" id="image" name="image" multiple="false" accept="image/*" />
我有，请检查编辑
你试图回显一个无效的字符串，$_POST['tsitle']你必须改成$_POST['note_title']