Bootstrap文件输入不显示浏览的图像名称

发布于 2025-01-09 14:06:39 字数 930 浏览 1 评论 0原文

我正在使用 Admin LTE 主题，并且添加了此输入用于上传图像：

<div class="form-group">
    <label for="sendImage">Send Image</label>
    <div class="input-group" id="dyanimc-field2">
        <div class="custom-file" >
            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
            <input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
        </div>
    </div>
</div>

但是当我浏览图像时，它应该显示所选的图像名称，但事实并非如此！

所以默认情况下它看起来像这样：

当我选择图像时，它应该显示图像名称而不是选择文件，如下所示：

那么这里出了什么问题呢？上传前选择的图像名称如何显示？

原文

I'm using Admin LTE theme and I have added this input for uploading image:

<div class="form-group">
    <label for="sendImage">Send Image</label>
    <div class="input-group" id="dyanimc-field2">
        <div class="custom-file" >
            <label class="custom-file-label" for="exampleInputFile">Choose file</label>
            <input type="file" class="custom-file-input" id="sendImage" name="product_image[]">
        </div>
    </div>
</div>

But when I browse and image, it should be showing the image name which is selected but it doesn't!

So by default it looks like this:

And when I choose an image it should be showing image name instead of Choose file, like this:

So what's going wrong here? How can I show the image name when it's selected before uploading?

分享到QQ

分享到微博

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

发布评论

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

时光磨忆 2025-01-16 14:06:39

我在使用 Admin LTE HTML 模板设计自定义用户仪表板时遇到了类似的问题。

经过几次谷歌搜索后，我意识到这是引导程序中的一个已知问题， this github问题评论为我解决了这个问题。

我能够使用这个第三方库让它工作下面的代码行为我解决了这个问题。

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
    $(document).ready(function () {
            bsCustomFileInput.init()
        })
</script>

I can across similar problem while designing a custom user dashboard using Admin LTE HTML template.

After few googling, I realized it was a known issue in bootstrap, this github issue comment solved the problem for me.

I was able to get it working using this third-party library and the lines of code below solved it for me.

<script src="https://cdn.jsdelivr.net/npm/bs-custom-file-input/dist/bs-custom-file-input.min.js"></script>
<script>
    $(document).ready(function () {
            bsCustomFileInput.init()
        })
</script>

回复收藏 0 原文

~没有更多了~