使用jquery追加时无法提交多文件上传

Question

我想使用jquery生成表单输入文件，但在上传表单时遇到问题，只提交了一个输入文件，来自jquery-append的表单没有提交我的jquery代码：

$(document).ready(function() {
    var i =$('#gbr_area span').size() + 1;
    $('#btnAdd').click(function() {
        if(i<6)
        {
            $('#gbr_area').append("<span><input type='radio' name='logo_produk' value='"+i+"'>logo produk ke "+i+"<input type='file' name='gambar["+i+"]' size='5'><input type='button' id='btnDel' value='hapus'><br></span>");
            i++;
        }
        return false;
    });

    $("#btnDel").live('click', function(event) {
        $(this).parent().remove();
        return false;
    });
});

和这段html代码：

<form action='/add_save/' method='post' enctype='multipart/form-data'><tr>
    <td>
        <div id='gbr_area'>
        <span>
            <input type='radio' name='logo_produk' value='1'>logo produk ke 1
            <input type='file' name='gambar[1]' size='5'>
            <input type='button' id='btnDel' value='hapus'><br>
        </span>
        </div>
        <input type='button' id='btnAdd' value='tambah gambar lain'>
    </td>
    <td>
        <input type='submit' value='add'>
    </td>";
</tr></form>

Answer 1

但是，在清理了一些代码并在jsfiddle中对其进行了测试之后，javascript创建了如下形式：

<form action="/action/" method="post" enctype="multipart/form-data">
  <div id="gbr_area">
    <span>
      <input type="radio" name="logo_produk" value="1">logo produk ke 1
      <input type="file" name="gambar[1]" size="5">
      <input type="button" id="btnDel" value="hapus"><br>
    </span>
    <span>
      <input type="radio" name="logo_produk" value="2">logo produk ke 2
      <input type="file" name="gambar[2]" size="5">
      <input type="button" id="btnDel" value="hapus"><br>
    </span>
    <span>
      <input type="radio" name="logo_produk" value="3">logo produk ke 3
      <input type="file" name="gambar[3]" size="5">
      <input type="button" id="btnDel" value="hapus"><br>
    </span>
    <span>
      <input type="radio" name="logo_produk" value="4">logo produk ke 4
      <input type="file" name="gambar[4]" size="5">
      <input type="button" id="btnDel" value="hapus"><br>
    </span>
    <span>
      <input type="radio" name="logo_produk" value="5">logo produk ke 5
      <input type="file" name="gambar[5]" size="5">
      <input type="button" id="btnDel" value="hapus"><br>
    </span>
  </div>
  <input type="submit" value="add">
</form>

当我提交此表单时，我看到以下内容(为简洁起见，省略了数据)：

POST /action/ HTTP/1.1
Content-Length:1320
Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryzBEm8aSzMRApGfYS
Origin:http://fiddle.jshell.net
Referer:http://fiddle.jshell.net/_display/

------WebKitFormBoundaryzBEm8aSzMRApGfYS
Content-Disposition: form-data; name="gambar[1]"; filename="hello.cmi"
Content-Type: application/octet-stream

<data>
------WebKitFormBoundaryzBEm8aSzMRApGfYS
Content-Disposition: form-data; name="gambar[2]"; filename="hello.cmo"
Content-Type: application/octet-stream

<data>
------WebKitFormBoundaryzBEm8aSzMRApGfYS
Content-Disposition: form-data; name="gambar[3]"; filename="hello.cmx"
Content-Type: application/octet-stream

<data>
------WebKitFormBoundaryzBEm8aSzMRApGfYS
Content-Disposition: form-data; name="gambar[4]"; filename="hello.ml"
Content-Type: text/x-ocaml

<data>
------WebKitFormBoundaryzBEm8aSzMRApGfYS
Content-Disposition: form-data; name="gambar[5]"; filename=""
Content-Type: application/octet-stream

<data>
------WebKitFormBoundaryzBEm8aSzMRApGfYS--

所以看起来所有的数据都被发送了。