Javascript 文件上传后如何显示关闭图标

我正在做的是，一旦任何用户上传文件，我就必须在文件上启用交叉签名

我尝试过使用javascript，但不起作用。我有超过8-10种文件类型

下面是该文件的屏幕截图

下面是上传文件后的屏幕截图

$（函数（）{
//const max_字段=5；
常量$wrapper=$（“.input_fields_wrapp.upload_file”）；
$wrapper.on（'change'，'.fileupload'，function（）{
图像预览（本）；
});
//浏览器中的多图像预览
const imagesPreview=函数（输入）{
const placeToInsertImagePreview=$（输入）.parent（）.find（'div.gallery'）；
if（input.files）{
var filesamunt=input.files.length；
for（设i=0；iinput[type=“file”]{
填充底部：45px；
}
.upload\u文件{
边框：3个虚线#042954；
位置：相对位置；
文本对齐：居中；
填充：20px；
边界半径：3px；
背景#f9f9f9；
高度：120px；
}
.upload_文件输入{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
大纲：无；
不透明度：0；
光标：指针；
}
.删除“”字段{
位置：绝对位置；
顶部：-10px；
右：-10px；
颜色：#fff；
背景色：红色；
宽度：22px；
高度：22px；
文本对齐：居中；
边界半径：20px；
}
.upload_文件img{
宽度：100px；
}
.customfileWrap{
位置：相对位置；
}
.30{
宽度：300px；
}
.移除现场img{
宽度：100%；
}

点击这里上传文件
点击这里上传文件

我添加了一些css，并在您的文件上载程序中创建了一个对象：

CSS:

添加了Html：

<div class="cross">X</div>

演示

$（函数（）{
//const max_字段=5；
常量$wrapper=$（“.input_fields_wrapp.upload_file”）；
$wrapper.on（'change'，'.fileupload'，function（）{
图像预览（本）；
});
//浏览器中的多图像预览
const imagesPreview=函数（输入）{
const placeToInsertImagePreview=$（输入）.parent（）.find（'div.gallery'）；
if（input.files）{
var filesamunt=input.files.length；
for（设i=0；iinput[type=“file”]{
填充底部：45px；
}
.upload\u文件{
边框：3个虚线#042954；
位置：相对位置；
文本对齐：居中；
填充：20px；
边界半径：3px；
背景#f9f9f9；
高度：120px；
}
.upload_file.cross{
位置：绝对位置；
高度：20px；
宽度：20px；
线高：20px；
文本对齐：居中；
边界半径：50%；
背景色：红色；
顶部：-10px；
右：-10px；
光标：指针；
显示：无；
}
.upload_file.haveFile.cross{
显示：块；
}
.upload_文件输入{
位置：绝对位置；
宽度：100%；
身高：100%；
左：0；
排名：0；
大纲：无；
不透明度：0；
光标：指针；
}
.删除“”字段{
位置：绝对位置；
顶部：-10px；
右：-10px；
颜色：#fff；
背景色：红色；
宽度：22px；
高度：22px；
文本对齐：居中；
边界半径：20px；
}
.upload_文件img{
宽度：100px；
}
.customfileWrap{
位置：相对位置；
}
.30{
宽度：300px；
}
.移除现场img{
宽度：100%；
}

点击这里上传文件
X
点击这里上传文件
X

如果要显示文件预览，请使用

src=URL.createObjectURL（文件）

而不是使用FileReader@Endless，你能帮我举个例子吗？因为我从google得到了这个答案。更新了你的代码示例以使用对象URLinstead@Endless，让我检查一下。给我点时间给我检查一下是的，它正在工作。非常感谢你的帮助

<div class="cross">X</div>

placeToInsertImagePreview.closest(".upload_file").addClass("haveFile")