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

    ......
}

使用FormData和jQuery.ajax上传文件

1 个答案: