有清除文件选择器的程序化方法吗？

Question

我正在使用'＆lt; input type =“file”。 。 。'一次一个地选择文件，然后将选定的文件附加到表中，就在选择器下面。这与在功能区上使用SharePoint表单的“附件”按钮非常相似。

但是，在选择文件并更新表格之后，我想清除选择器的显示。更改.value = ""无效......

我喜欢：

我想摆脱“W：\ Documents \ HTML Te ...”的内容。

Answer 1

我认为实现这一目标的最简单方法是删除输入[type = file]元素，然后创建一个新元素。

var el = document.querySelector('input[type=file]');
var parent = el.parentElement;
var newEl = document.createElement("input");
newEl.setAttribute('type', 'file');
parent.removeChild(el);
parent.appendChild(newEl)

Answer 2

因为结果需要如下：

    <table>
      <tr>
        <td>
          <target picker>
          <Nested table>
            . . .

来自Connor的

和appendChild解决方案将导致：

    <table>
      <tr>
        <td>
          <Nested table>   // <———<<<  wrong order
          <target picker>  // <———<<<  for these 2
            . . .

它对我不起作用。我开始关注.insertBefore()，但是同事在下面提出了JQuery解决方案。我带来了对现有FilePicker的引用，它通过现有选择器的onchange事件以this传入。 （您可以在添加到newPicker的函数中看到该调用）。在处理文件名的现有选择器之后，我运行以下命令：

    var newPicker = document.createElement('input');
        newPicker.setAttribute('type', 'file');
        newPicker.style.display = 'block';
        newPicker.onchange = function() { FileSelection(this); };

    $(picker).replaceWith(newPicker);