bootstrap+fileinput插件实现可预览上传照片功能

最新推荐文章于 2025-03-27 15:10:49 发布

森林中的神光

最新推荐文章于 2025-03-27 15:10:49 发布

阅读量5.5k

点赞数

本文链接：https://blog.youkuaiyun.com/qq_43685118/article/details/84073432

版权

本文介绍如何利用bootstrap-fileinput插件在实际项目中实现图片上传、更改和移除功能，包括相关css和js文件的使用，并提供前端、Java等资源的福利链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.youkuaiyun.com/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

图片.png

实际项目中运用：

图片.png

功能：实现上传图片，更改上传图片，移除图片的功能

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">        <link rel="stylesheet" href="bootstrap-fileinput.css">        <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>        <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>        <script src="bootstrap-fileinput.js"></script>    </head>    <body>        <div class="form-group">            <div class="col-md-8">                <div class="fileinput fileinput-new" data-provides="fileinput" id="uploadImageDiv">                    <div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">                        <img src="${companyInfo.image}" alt="" />                    </div>                    <div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>                    <div>                        <span class="btn default btn-file"> <span                                            class="fileinput-new">选择图片</span> <span class="fileinput-exists">更改</span> <input type="file" name="uploadImage" id="uploadImage" /></span>                        <a href="#"

最低0.47元/天解锁文章