Question

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

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

Answer 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链接稍作更改）以获取示例等。

Answer 2

你可以尝试这样的事情。

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

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

2 个答案: