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

    ...... 
}