使用FormData和jQuery.ajax上传文件

我试着从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>

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

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

Grails代码如下：

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

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

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

问题是，我总是得不到

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

request.getFile（'filename'）返回null

我在这里遗漏了什么？

阅读

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

所以试试看

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

也

要获取输入值，需要使用not

要附加文件，还需要添加文件引用，如

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

    ......
}

阅读

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

所以试试看

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

也

要获取输入值，需要使用not

要附加文件，还需要添加文件引用，如

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

    ......
}

---

Arun，如果webapp部署在windows上，我可以上传文件。但当webapp部署在ubuntu上时，它失败了。应该区别对待吗？不是真的。。。但我在grails方面没有任何经验。。。所以我不能对此发表评论。。。就客户机代码而言，服务器实际上不应该为这两种部署保留日志。在windows部署中，“请求”是一个“org.springframework.web.multipart.commons.commons多部分文件”对象。在ubuntu部署中，“请求”是一个“org.springframework.web.multipart.support.defaultmultipartttpServletRequest”对象。这意味着什么？你的类路径中有commons fileupload库吗？如果你可以问一个不同的问题，使用spring和grails标记，那么在这方面有更好经验的人可以帮助你更好地运行，如果webapp部署在windows上，我可以上传文件。但当webapp部署在ubuntu上时，它失败了。应该区别对待吗？不是真的。。。但我在grails方面没有任何经验。。。所以我不能对此发表评论。。。就客户机代码而言，服务器实际上不应该为这两种部署保留日志。在windows部署中，“请求”是一个“org.springframework.web.multipart.commons.commons多部分文件”对象。在ubuntu部署中，“请求”是一个“org.springframework.web.multipart.support.defaultmultipartttpServletRequest”对象。这意味着什么？你的类路径中有commons fileupload库吗？如果你可以问一个不同的问题，使用spring和grails标记，那么在这方面有更好经验的人可以更好地帮助你