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

multi-file upload cannot submitted when using jquery append

本文关键字：文件 提交 jquery append 使用      更新时间：2023-09-26

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

我不能具体地说，如果没有看到处理上传的服务器代码，然而，在清理了一些代码并在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--

所以看起来所有数据都已发送。

相关文章：