Javascript 添加'；删除'；图标到文件上载字段

我有一个非常简单的表单，允许用户上传图像。它用图像替换占位符div，如下所示：

当一个文件就位时，我可以在右上角有一个删除图标来取消该文件吗

$（“输入[type='file']”）。在（“更改”上，函数（event1）{
src1=URL.createObjectURL（event1.target.files[0]）；
this.parentNode.parentNode.querySelector（“label”）.style.backgroundImage='url（'+src1+'）；
this.parentNode.parentNode.querySelector（“标签范围”）.style.display='none'；
});
.form文件上载容器{
浮动：左；
宽度：100%；
边缘底部：12px；
边缘顶部：12px；
}
@介质（最小宽度：640像素）{
.form文件上载容器{
边缘底部：20px；
利润上限：20px
}
}
.表格文件上载{
位置：相对位置；
浮动：左；
宽度：48.5%；
高度：自动；
保证金权利：3%；
利润底部：3%；
}
@介质（最小宽度：450px）{
.表格文件上载{
宽度：31.3333%
}
}
@介质（最小宽度：750px）{
.表格文件上载{
宽度：22.75%
}
}
@介质（最小宽度：1600px）{
.表格文件上载{
宽度：14.1666667%；
保证金权利：2%
}
}
.form文件上载：第n个子项（2n）{
右边距：0
}
@介质（最小宽度：450px）{
.form文件上载：第n个子项（2n）{
保证金权利：3%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（2n）{
保证金权利：2%
}
}
@介质（最小宽度：450px）{
.form文件上载：第n个子项（3n）{
右边距：0
}
}
@介质（最小宽度：750px）{
.form文件上载：第n个子项（3n）{
保证金权利：3%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（3n）{
保证金权利：2%
}
}
@介质（最小宽度：750px）{
.form文件上载：第n个子项（4n）{
右边距：0
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（4n）{
保证金权利：2%
}
}
@介质（最小宽度：1600px）{
.form文件上载：第n个子项（6n）{
右边距：0
}
}
.form文件上载内部{
宽度：100%；
身高：0；
填充顶部：133.33333%
}
.form文件上载标签{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：白色；
z指数：2；
光标：指针；
边框：1px实心#AFB4；
背景尺寸：封面；
背景位置：中心；
背景重复：无重复；
颜色：#AFB4；
-webkit过渡：背景轻松0.2秒，边框轻松0.2秒；
-moz过渡：背景0.2s缓变，边框0.2s缓变；
-o型过渡：背景0.2秒缓和，边框0.2秒缓和；
过渡：背景轻松0.2秒，边框轻松0.2秒
}
.form文件上载范围{
位置：绝对位置；
最高：50%；
左：0；
宽度：100%；
字体大小：15px；
文本对齐：居中；
-webkit转换：translateY（-50%）；
-莫兹变换：translateY（-50%）；
-ms转换：translateY（-50%）；
-o-变换：translateY（-50%）；
转换：translateY（-50%）
}
.form文件上载范围：之前{
内容：''；
背景：url（../img/image upload icon.png）无重复中心#fff；
背景：url（../img/image upload icon.svg）无重复中心#fff；
背景尺寸：65px 56px；
显示：块；
宽度：65px；
高度：56px；
保证金：0自动；
下页边距：5px
}
.form文件上载输入{
位置：相对位置；
不透明度：0；
z指数：1
}
.form文件上载。关闭{
显示：无；
位置：绝对位置；
顶部：-13px；
右：-13px；
宽度：26px；
高度：26px；
字号：18px；
文本对齐：居中；
线高：26px；
背景：白色；
z指数：3；
-webkit过渡：背景轻松0.2s，颜色轻松0.2s；
-moz过渡：背景0.2s轻松，颜色0.2s轻松；
-o过渡：背景0.2s缓变，颜色0.2s缓变；
过渡：背景轻松0.2秒，颜色轻松0.2秒
}

选择图像
选择图像
选择图像
代码中有此图标，但它隐藏了

.form-file-upload .close {
display: none;
}

在javascript中添加此代码

  this.parentNode.parentNode.querySelector("button").style.display = 'block';
});

谢谢您的帮助。但是，当我单击它时，它不会删除图像。你知道为什么吗？谢谢：-）要清除文件输入本身，请使用
$（“#您的文件输入”）.val（“”）。请记住，这只适用于清除文件输入，而不是向其中添加文件。出于安全原因，您不能以编程方式将文件添加到文件输入。@JinuKurian以任何可能的方式将图像加载到
img src
而不是
background url
，谢谢：-）即使我删除了
display:none
部分，关闭图标实际上仍然不起作用。有什么想法吗？