Question

我想知道是否有人知道动态创建上传表单的最佳方式？

这是我想要实现的：下面显示的代码允许一次上传，我想要一个按钮，按下时，应该添加另一个表单进行文件上传。所以，如果我想上传 - 比方说7个文件，我想按下按钮7次来创建这些上传表单，每个表单都在它自己的行上。

无论如何我能做到吗？

感谢您的协助：

<html>
    <head>
        <title> Multiple File Uploads </title>
    </head>
    <body>
        <form enctype="multipart/form-data" action="uploader.php" method="POST">
            Choose a file to upload: <input name="uploadedfile" type="file" /><br />
            <input type="submit" value="Upload File" />
        </form>
    </body>
</html>

Answer 1

通常你会这样做，客户端：

<div id='Uploadcontainer'>
   <input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload'>Add another field</button>
<script type='text/javascript'>
  $('#extraUpload').click(function(){
      $('.uploadfile:last').clone().appendTo('#uploadContainer');
  });
</script>

那是使用jQuery。然后在服务器端，您可以轻松遍历$ _FILES ['uploadfiles']数组：

foreach($_FILES['uploadfiles'] as $file){
  //do stuff with $file
}

Answer 2

在这里看一个简单的例子

http://mohamedshaiful.googlepages.com/add_remove_form.htm

约什

Answer 3

jQuery有一个很好的插件，我使用了一个名为MultiFile的插件。你可能想检查一下。

http://www.fyneworks.com/jquery/multiple-file-upload/

Answer 4

这是一个非常简单的，适用于FireFox，Chrome和IE7。我真的建议你查看一个jQuery框架，比如jQuery，它会让你的生活更轻松。

<div id='Uploadcontainer'>
<input type='file' name='uploadfiles[]' class='uploadfile' />
</div>
<button id='extraUpload' onclick="return addAnother('Uploadcontainer')">Add another field</button>
<script type='text/javascript'>
function addAnother(hookID)
{
    var hook = document.getElementById(hookID);
    var el      =   document.createElement('input');
    el.className    =   'uploadfile';
    el.setAttribute('type','file');
    el.setAttribute('name','uploadfiles[]');
    hook.appendChild(el);
    return false;
}

Answer 5

你可以尝试这个名为uploadify的jQuery插件您可以尝试YUI uploader

确保在服务器上正确处理文件，因为Flash有时会以不同的方式将数据发布到服务器。因此，如果您有某种方法来检查请求值中的内容，那么您应该是好的。

Answer 6

目前无法使用纯HTML执行此操作。我认为它已经开始在最新版本的浏览器和即将推出的HTML5规范中得到解决。

目前大多数跨浏览器解决方案都需要一个JS库（我认为是Flash）。另一种方法是使用自己的输入元素单独选择每个文件。由于显而易见的原因，浏览器在脚本和文件上传元素的显示方面实施了非常严格的安全性，这使得它们难以使用。

动态创建多个上传文件

6 个答案: