javascript在无限上传按钮上删除文件

Posted 2023-05-07

【中文标题】javascript在无限上传按钮上删除文件

【英文标题】：javascript delete file on unlimited upload button

【发布时间】：2015-01-20 15:22:59

【问题描述】：

感谢您即将提供的帮助，我正在开发一个上传器，并尝试为每个额外的输入字段添加一个 javascript 删除链接。我有一个添加一个孩子的。

这是一个代码笔：http://codepen.io/anon/pen/NPPmYP

我想要做的是在创建额外的输入字段期间，如果有人能够提供帮助，这是我的代码。

这些方法我也试过了，都不管用

<script language="javascript">
<!--
function _add_more() 

    files.appendChild(document.createElement("br"));

    var del = document.createTextNode("Delete ");
    document.getElementById("files").appendChild(del);

    var extra = document.createElement('input');
    extra.type="file";
    extra.id="images[]";
    extra.name="images[]";
    extra.size="50";
    extra.accept="image/jpeg";
    document.getElementById("files").appendChild(extra);

</script>

我尝试将我对该行的内容更改为

var del = document.createTextNode('<a href="javascript:_del_extra();">delete</a> ');

但它只是将其显示为文本而不是使其成为可点击的链接，我真的不确定如何创建删除孩子而不影响任何其他人的功能。感谢您对即将到来的支持

【参考方案1】：

您需要为单击删除链接附加一个事件处理程序。

类似的东西。 （根据评论更新）

<script language="javascript">
function _add_more() 

    var del = document.createElement("a");
    del.appendChild(document.createTextNode("Delete"));
    del.href="#"; // Apply link styling

    var extra = document.createElement('input');
    extra.type="file";
    extra.id="images[]";
    extra.name="images[]";
    extra.size="50";
    extra.accept="image/jpeg";

    var additionalFile = document.createElement('span');
    additionalFile.appendChild(document.createElement("br"));
    additionalFile.appendChild(del);
    additionalFile.appendChild(extra);

    document.getElementById("files").appendChild(additionalFile);

    del.addEventListener('click', function(event)
        additionalFile.parentElement.removeChild(additionalFile);
        event.preventDefault();
    );

</script>

【讨论】：

谢谢，但问题似乎是它并没有使它成为可点击的链接，而是将其变成了几乎显示代码的文本链接。这是我的代码笔codepen.io/anon/pen/NPPmYP

那是因为你使用的是createTextNode。我将更新我的示例以附加一个 元素。

非常感谢，还有一件事，如果他们有额外的文本框，我该怎么做，那么它是必需的吗？我会使用 extra.required = "required"; 对吗？

是的，您可以使用 html5 验证来强制执行必填字段。 developer.mozilla.org/en-US/docs/Web/HTML/Element/…

感谢您抽出宝贵时间帮助我！解决了。 @山姆