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

最新推荐文章于 2020-04-09 14:51:42 发布

Coding&Sharing

最新推荐文章于 2020-04-09 14:51:42 发布

阅读量455

点赞数

分类专栏：大前端文章标签： boostrap

本文链接：https://blog.csdn.net/weixin_38500202/article/details/98472408

版权

因为自带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

最低0.47元/天解锁文章

Coding&Sharing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
在SUI中使用bootstrap-fileinput插件步骤

因为自带file上传文件太丑了，所以使用Bottsrap的上传插件，示例可在github上直接下载。示例地址：https://github.com/kartik-v/bootstrap-fileinput（官网最新的是版本5,）英文在线文档：http://plugins.krajee.com/file-input/demo（基本能看懂，多查字典即可）最终界面如下...
复制链接

扫一扫