如何在HTML表单中添加删除图标以文件上传

发布于 2025-02-10 15:06:35 字数 410 浏览 0 评论 0原文

我开发了一个用于文件上传的表格。现在，我想添加一个删除图标以删除UI中的上传文件。请为我提供带有删除功能的解决方案。谢谢。

        <div class="form-group row">
            <label class="col-md-5 col-form-label">attachment</label>
            <div class="col-md-7">
                <input type="file" class="form-control" id="file" name="file"><br><br>
            </div>
        </div>

原文

I developed a form for file uploading. now I want to add a remove icon to remove the uploaded file in UI. please provide me a solution with remove the function. Thank you.

        <div class="form-group row">
            <label class="col-md-5 col-form-label">attachment</label>
            <div class="col-md-7">
                <input type="file" class="form-control" id="file" name="file"><br><br>
            </div>
        </div>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

很酷又爱笑 2025-02-17 15:06:35

如果使用Bootstrap 5：

添加文件bootstrap-icons.css

<div class="input-group">
    <label class="col-md-5 col-form-label">attachment</label>
    <input type="file" class="form-control" id="file" name="file" />
    <button class="btn btn-outline-secondary" type="button"><i class="bi bi-trash3"></i></button>
</div>

if using bootstrap 5 :

add file bootstrap-icons.css

<div class="input-group">
    <label class="col-md-5 col-form-label">attachment</label>
    <input type="file" class="form-control" id="file" name="file" />
    <button class="btn btn-outline-secondary" type="button"><i class="bi bi-trash3"></i></button>
</div>

回复收藏 0 原文

~没有更多了~