jquery - 使用 FormData 和 jQuery.ajax 上传文件

Question

我尝试从 stackoverflow 和一些博客中学习一些示例。但我无法上传文件。

我有这样的表格：

<form enctype="multipart/form-data">
  <input type="hidden" id="viewport" name="viewport" value="1">

  <input type="hidden" id="idinfo" name="idinfo" value="-1">

  <input type="file" id="filename" name="filename" value="">

  <select id="cbTipe" name="cbTipe" onchange="ChangeType()">
    <option value="1">Text</option>
    <option value="2">Text &amp; Foto</option>
    <option value="8">Video</option>
  </select>

  <button type="button" name="btnClear" onclick="ClearForm();">Bersihkan Form</button>
  <button type="button" name="btnSimpan" onclick="SubmitForm();">Simpan</button>

</form>

和这样的 JavaScript 代码：

function SubmitForm()
{
  data = $("form input").serialize();

  aFormData = new FormData($("form *"));

  aFormData.append("filename", data[2]);

  $("form input").each(
    function(i)
    {
      aFormData.append($(this).attr("name"), $(this).attr("value"));
    }
  );

  $("form select").each(
    function(i)
    {
      aFormData.append($(this).attr("name"), $(this).attr("value"));
    }
  );

  $.ajax(
    {
      url         : the_url + "/form_action",
      type        : "POST",
      contentType : false,
      processData : false,
      data        : aFormData,
      dataType    : "json",
      success     : 
        function(data)
        {
          if(data['status'] == 'ok')
          {
            RefreshList(data['html'])
          }
          else
          {
            alert("Error on FormAction")
          }

          ClearForm();
       }
    }
  );
}

还有一个像这样的 Grails 代码：

def test = request.getFile('filename').getName()

问题是，我总是得不到

request.getFile('filename').getName()

request.getFile('filename') 返回 null。

我在这里想念什么？

Answer 1

使用 FormData 对象阅读

FormData 将 dom 引用作为参数，而不是 jQuery 包装器。

所以试试

aFormData = new FormData($("form").get(0));

还

aFormData.append($(this).attr("name"), $(this).val());

要获取输入的值，您需要使用.val()而不是.attr('value')

另外要附加文件，您需要添加文件引用，例如

aFormData.append("filename", $('#filename').get(0).files[0]);

所以你的代码可能看起来像

function SubmitForm() {
    var aFormData = new FormData();

    aFormData.append("filename", $('#filename').get(0).files[0]);

    $("form input").each(function(i) {
        aFormData.append($(this).attr("name"), $(this).val());
    });

    $("form select").each(function(i) {
        aFormData.append($(this).attr("name"), $(this).val());
    });

    ......
}