bootStrap file input 工具实现图片上传/删除/预览/保存等功能

最新推荐文章于 2024-09-23 15:22:14 发布

原创

最新推荐文章于 2024-09-23 15:22:14 发布

· 2.8k 阅读

8 ·

版权

文章标签：

#图片上传 #bootstrao file input #图片预览 #图片压缩

本文档介绍了如何使用BootStrap file input组件实现图片上传、预览、删除和保存功能。通过Thumbnails库进行图片压缩，并详细讲述了在开发过程中遇到的问题，如图片删除定位、保存顺序错误以及如何仅展示预览禁止上传。

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

参考资料：

BootStrap官方文档（哎，根本看不懂）：http://plugins.krajee.com/file-input

优快云：https://blog.youkuaiyun.com/github_36086968/article/details/72830855

........

完成功能：

第一页图片添加页：图片添加，预览，压缩（图片1-1）

第二页图片编辑页：将添加页图片显示，再次添加

第三页图片详情页：只显示（图片1-2）

实现原理：

将图片保存到服务器中，将url、名字等信息存储到数据库中。

图1-1

图1-2

1.图片上传功能实现：

js包：

    <link rel="stylesheet" href="/admin/plugin/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/plugin/bootstrap-fileinput/themes/explorer-fa/theme.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/plugin/bootstrap-fileinput/css/fileinput-rtl.css"/>
    <link rel="stylesheet" type="text/css" href="/admin/plugin/bootstrap-fileinput/css/fileinput.css"/>

    <script src="/admin/plugin/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="/admin/plugin/bootstrap-fileinput/js/locales/zh.js"></script>
    <script src="/admin/plugin/bootstrap/dist/js/bootstrap.min.js"></script>

jsp页面：

<tr>
    <td class="text-c">附件-图片上传(选填)</td>
    <td id="uploadIMG" colspan="7">
        <input id="mediaUrl" name="mediaUrl" type="file" multiple>
    </td>
</tr>

JS页面:

<script type="text/javascript">
function HashMap(){// 自己创建一个HashMap，不然保存到后台顺序是乱的
        this.map = {};
    }
    HashMap.prototype = {
        set : function(key , value){// 向Map中增加元素（key, value)
            this.map[key] = value;
        },
        get : function(key){ //获取指定Key的元素值Value，失败返回Null
            if(this.map.hasOwnProperty(key)){
                return this.map[key];
            }
            return null;
        },
        remove : function(key){ // 删除指定Key的元素，成功返回True，失败返回False
            if(this.map.hasOwnProperty(key)){
                return delete this.map[key];
            }
            return false;
        },
        removeAll : function(){  //清空HashMap