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

我想上传多个文件,所以我想通过 jquery动态添加上传字段.现在我可以这样做,如果我有一个像“添加另一个字段”的按钮,并将新上传附加到表单,但我想做的有点不同.

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

解决方法

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事件实际上是连接到表单,但只有当事件通过与选择器输入[type = file]匹配的元素时才触发处理程序. (jQuery确保更改事件传播,即使在默认情况下也不会传播.)

实例:(我假设您的标记会更有趣 – 当然看起来更好看 – 而不是在那里显示)

jQuery(function($) {
  $('form').on('change',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>

笔记：

>如果你需要支持过时的jQuery版本,你可以使用delegate,它就像on的委托形式,但参数的顺序不同.
>如果你需要支持过时的浏览器和过时版本的jQuery,那么更改事件可能不会冒泡,而旧的jQuery也没有让它成为委托的泡沫(即使直接挂钩时也是如此).

在任何一种情况下,请参阅2011 version of this answer(对JSBin链接稍作更改)以获取示例等.