[jquery]如何动态添加文件上传？答案

【问题标题】：[jquery]How do I add file uploads dynamically?[jquery]如何动态添加文件上传？
【发布时间】：2018-09-18 17:20:42
【问题描述】：

我想上传多个文件，所以想通过jquery动态添加上传字段。现在，如果我有一个“添加另一个字段”之类的按钮，并将新上传的内容附加到表单中，我就可以做到这一点，但我想做一些不同的事情。

最初表单应该有一个输入字段，在用户选择要上传的文件后，我想立即添加另一个上传字段。关于如何做到这一点的任何想法？

【问题讨论】：

标签： jquery

【解决方案1】：

input 元素有一个change 事件，当表单字段更改时会触发该事件。所以你可以使用event-delegating form of on:

$('selector_for_your_form').on('change', 'input[type=file]', function() {
    var form = $(this).closest('form');
    form.append(/* ... markup for the new field ... */);
});

change 事件实际上与表单相关联，但只有当事件通过与选择器 input[type=file] 匹配的元素时才会触发处理程序。（jQuery 确保change 事件传播，即使在默认情况下它不会传播的环境中也是如此。）

实时示例：（我认为您的标记会比此处显示的更有趣——当然也更好看）

jQuery(function($) {
  $('form').on('change', 'input[type=file]', function() {
    var form = $(this).closest('form');
    form.append('<input type="file">');
  });
});

  body {
    font-family: sans-serif;
  }
  p {
    margin: 0px;
  }

<form>
  <input type='file'>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意事项：

如果您需要支持不带on 的过时版本的jQuery，您可以使用delegate，它类似于on 的委托形式，但参数顺序不同。
如果您需要支持过时的浏览器和过时的 jQuery 版本，change 事件可能不会冒泡，并且旧 jQuery 不会为 delegate 使其冒泡（即使它在直接上钩）。

在任何一种情况下，请参阅2011 version of this answer （对 JSBin 链接稍作更改） 示例等。

【讨论】：

【解决方案2】：

你可以试试这样的。

<input type="file" name="file" onChange="if ($(this).val() != '' {addNewfileInput();}">

【讨论】：