使用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

阅读Using FormData Objects

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()); 
    }); 

    ...... 
}