在HTML页面上添加更多文件

Question

我见过网站，其中有一个框供用户浏览要上传的文件，然后是“添加更多文件”链接。当用户点击链接时，会显示另一个框，允许用户选择另一个文件。用户可以单击“添加更多文件”以继续添加框。他们如何做到这一点？

我正在使用Ruby on Rails作为我的后端。

Answer 1

<div id="filePickers">
  <input type="file" name="files[]">
  <input type="file" name="files[]">
  <input type="file" name="files[]">
</div>

当发布到您的服务器时，它将显示为params[:files]上的文件数组。

如果您想要更多，请将某些Javascript绑定到某个按钮以添加新输入。

// jQuery for brevity
$('#filePickers').append('<input type="file" name="files[]">');

Answer 2

这是一个HTML5“拖放上传”，基于两个HTML5 API：

• HTML5 Drag and Drop API
• File API

您可以找到手动实施它的教程here

但您宁愿使用已经实现它的库，例如jquery-filedrop