在SUI中使用bootstrap-fileinput插件步骤

本文链接：https://blog.youkuaiyun.com/weixin_38500202/article/details/98472408

本文介绍了如何在SUI项目中使用bootstrap-fileinput插件来美化文件上传功能。通过提供示例地址、英文在线文档链接，展示了如何导入JS和CSS资源，并提供了代码示例，强调了需要初始化插件才能实现汉化。

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

因为自带file上传文件太丑了，所以使用Bottsrap的上传插件，示例可在github上直接下载。

示例地址：https://github.com/kartik-v/bootstrap-fileinput（官网最新的是版本5,）

英文在线文档：http://plugins.krajee.com/file-input/demo（基本能看懂，多查字典即可）

最终界面如下

2.如何正确导入JS和CSS（由于我是相对路径，所以粘贴时需要稍作修改）

zh.js是汉化的JS，须放在fileinput.js后面。在github下载下来的文件里有JS和CSS

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src="/resources/js/fileinput.js"></script>
    <script type="text/javascript" src="/resources/zh.js"></script>
    <link rel="stylesheet" href="/resources/css/fileinput.css">

3.代码示例（仅提供一种思路，如有更好欢迎指正）

（仅导入zh.js并不能汉化插件，须用js初始化一下插件）

界面的完整代码如下，仅供参考。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>店铺注册</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">


    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">

    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript" src=".././resources/js/fileinput.js"></script>
    <script type="text/javascript" src=".././resources/zh.js"></script>
    <link rel="stylesheet" href=".././resources/css/fileinput.css">

</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <header class="bar bar-nav">
            <a class="button button-link button-nav pull-left back" href="/demos/form">
                <span class="icon icon-left"></span>
                返回
            </a>
            <h1 class='title'>店铺信息</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul>
                    <!-- Text inputs -->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">店铺名称</div>
                                <div class="item-input">
                                    <input type="text" id="shop_name" placeholder="给你店铺取个爱称8~WoW">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 商铺分类 下拉列表-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-gender"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">商铺分类</div>
                                <div class="item-input">
                                    <select id="shop_category">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 区域分类 下拉列表-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-gender"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">所属区域</div>
                                <div class="item-input">
                                    <select id="area_category">
                                    </select>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 详细地址 text-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">详细地址</div>
                                <div class="item-input">
                                    <input type="text" id="shop_addr" placeholder="详细地址">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 联系电话 text-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">联系电话</div>
                                <div class="item-input">
                                    <input type="text" id="phone" placeholder="联系方式yo~">
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 缩略图 上传控件-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-name"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">商铺缩略图</div>
                                <div class="item-input">
                                    <input id="input-id" type="file" class="file" data-preview-file-type="text" >
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 店铺简介 多行文本-->
                    <li class="align-top">
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-comment"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">店铺简介</div>
                                <div class="item-input">
                                    <textarea id="shop_desc" palceholder="店铺简介"></textarea>
                                </div>
                            </div>
                        </div>
                    </li>
                    <!-- 验证码 kaptcha-->
                    <li>
                        <div class="item-content">
                            <div class="item-media"><i class="icon icon-form-email"></i></div>
                            <div class="item-inner">
                                <div class="item-title label">邮箱</div>
                                <div class="item-input">
                                    <input type="email" placeholder="E-mail">
                                </div>
                            </div>
                        </div>
                    </li>

                </ul>
            </div>
            <div class="content-block">
                <div class="row">
                    <div class="col-50"><a href="#" class="button button-big button-fill button-danger">返回</a></div>
                    <div class="col-50"><a href="#" class="button button-big button-fill button-success" id="submit">提交</a></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script>
    //初始化插件
    $("#input-id").fileinput({
        uploadUrl : "/upload",//上传文件的url--对应后台的接收controller
        language: 'zh', //设置语言
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],
        overwriteInitial : false,
        dropZoneEnabled: false,//禁用dropZone区域,选择图片后才显示预览区域(推荐)
        //showPreview: false,//隐藏dropZone和预览区
        //showBrowse: false,//隐藏选择框的选择按钮
        //showUpload: false,//隐藏选择框的上传按钮
        showCaption: false,//隐藏选择栏的input
        //captionClass:'col-sm-10',//在标题容器上额外的class
        //previewClass:'col-sm-10',//在预览容器上额外的class
        //mainClass:'col-sm-10',//添加在文件上传主容器额外的class
        maxFileSize : 2000,//上传文件最大的尺寸
        maxFilesNum : 3,//上传最大的文件数量
        //initialCaption: "请上传图片",//文本框初始话value
        //allowedFileTypes: ['image', 'video', 'flash'],
        slugCallback : function(filename) {
            return filename.replace('(', '_').replace(']', '_');
        }
    });

    //上传成功后回调函数
    $('#file-0a').on('fileuploaded', function(event, data, previewId, index) {
        debugger;
        var form = data.form, files = data.files, extra = data.extra,
            response = data.response, reader = data.reader;
        console.log(response);//打印出返回的json
        console.log("${hostname}"+response.result);//打印出路径
        $("#pics").append('<input type="hidden" class="imagePaths" name="imagePaths_'+index+'.filePath"  value="'+"${hostname}"+response.result+'">');


    });

</script>
</body>
</html>