jquery ajax不会发送帖子数据

Question

我正在创建一个 ajax 上传文件。我已经使用 PHP 编写了我的上传代码，它工作正常。问题是当我使用 $.ajax{} 时。我的upload.php 无法接收表单数据。这是我的代码。

function pleaseUpload(){
$(document).ready(function(){
        //var fd=new FormData($("form#form_upload_1"));
        var fd = new FormData();
        fd.append( "file", $("#edit_first [type=file]")[0].files[0]);
        fd.append( "hid", $("#form_upload_1 [type=hidden]").val());
        alert(fd);
        $("#image_1").html("");
        $.ajax( {
          type: 'POST',
          url: 'save_picture.php',
          data: fd,
          processData: false,
          contentType: false,
          cache: false,
          success: function(data){
            $("#image_1").html(data);
          }
        });
});

}

<form id='form_upload_1' enctype='multipart/form-data' name='form_upload_1' method='post' action=''>    
   <div id='edit_first' class='upload_button_wrapper'>
    <input id='edit_first' class='upload_button' type='file' onchange='pleaseUpload()' name='file'/>
    <input type='hidden' name='hid' value="first" />
   </div>
</form>

Answer 1

如果要将表单传递给表单数据对象，则必须在构造函数中进行

var fd = new FormData($("#form_upload_1")[0]);

注意我传递的是 HTMLFormElemnt 而不是封装它的 jQuery 对象。

append 方法采用字符串/Blob/文件，即表单字段数据

var fd = new FormData();
fd.append( "file", $("#edit_first")[0].files[0]);
fd.append( "hid", $("#form_upload_1 [type=hidden]").val());

您还应该知道，html 元素的 id 属性在每个文档中应该是唯一的。