Bootstrap fileinput:文件上传插件的基础用法

基础用法一

  1. 导入核心CSS及JS文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
      <!--1、bootstrap.min.css
          2、fileinput.min.css
          3、jquery-3.2.1.min.js
          4、bootstrap.min.js
          5、fileinput.min.js
          6、fileinput_locale_zh.js(可选择)-->
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="css/fileinput.css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
    <script type="text/javascript" src="js/fileinput.js"></script>
      <!-- 中文化,注意locale语言文件在fileinput.min.js文件之后引入 -->
    <script type="text/javascript" src="js/fileinput_locale_zh.js"></script>
  2.   基本file类型的表单的样式
    1
    2
    3
    4
    5
    6
    7
    <form method="POST" action="#">
      <div class="form-group">
        <label for="file">文件输入</label>
        <input type="file" name="file" id='myfile'>
      </div>
      <input type="submit" name="submit" value='提交' class="btn btn-primary">
    </form>
  3. 初始化fileinput插件

    1
    2
    3
    <script type="text/javascript">
        $('#myfile').fileinput();
      </script>

 

完整的HTML文件  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<br><!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>file-input demo</title>
    <!-- 导入核心CSS及JS文件 -->
    <!--1、bootstrap.min.css
        2、fileinput.min.css
        3、jquery-3.2.1.min.js
        4、bootstrap.min.js
        5、fileinput.min.js
        6、fileinput_locale_zh.js(可选择)-->
  <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
  <link rel="stylesheet" type="text/css" href="css/fileinput.css">
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
  <script type="text/javascript" src="js/fileinput.js"></script>
    <!-- 中文化,注意locale语言文件在fileinput.min.js文件之后引入 -->
  <script type="text/javascript" src="js/fileinput_locale_zh.js"></script>
    <!-- /导入导入核心CSS及JS文件 -->
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <h1>fileinput插件基础样例</h1>
 
        <!-- 基本file类型的表单的样式 -->
        <form method="POST" action="#">
          <div class="form-group">
            <label for="file">文件输入</label>
            <input type="file" name="file" id='myfile'>
          </div>
          <input type="submit" name="submit" value='提交' class="btn btn-primary">
        </form>
        <!-- /基本file类型的表单的样式 -->
      </div>
    </div>
  </div>
 
  <!-- 初始化fileinput插件 -->
  <script type="text/javascript">
    $('#myfile').fileinput();
  </script>
     
</body>
</html>

  

显示截图

 

问题及解决方法

本地Bootstrap文件字体图标无法显示:http://blog.csdn.net/nongweiyilady/article/details/53611094

简而言之,是因为我只引入了bootstrap.css文件,而这个css文件的字体图标是依赖于外部文件的,解决方法就是导入整个bootstrap文件夹,保证万无一失嘛

 

基础用法二

  1. 导入核心CSS及JS文件,同基础用法一
  2.   基本file类型的表单的样式
    1
    <div class="container kv-main"><br>    <form enctype="multipart/form-data"><br>        <div class="file-loading"><br>            <input id="myfile" type="file" multiple><br>        </div><br>    </form> <br></div>
  3. 初始化fileinput插件

    1
    <script type="text/javascript"><br>//初始化函数<br> function initFileInput(ctrlName, uploadUrl) { <br>      var control = $('#' + ctrlName); <br>      control.fileinput({ <br>        resizeImage : true, <br>        maxImageWidth : 200, <br>        maxImageHeight : 200, <br>        resizePreference : 'width', <br>        language : 'zh', //设置语言 <br>        uploadUrl : uploadUrl, <br>        uploadAsync : true, <br>        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀 <br>        showUpload : true, //是否显示上传按钮 <br>        showCaption : true,//是否显示标题 <br>        browseClass : "btn btn-primary", //按钮样式 <br>        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>", <br>        maxFileCount : 3, <br>        msgFilesTooMany : "选择图片超过了最大数量", <br>        maxFileSize : 2000, <br>      }); <br>    }; <br>   //调用初始化函数,传递参数为控件id,与上传路径 <br>    initFileInput("myfile", "#");<br></script>

 

完整的HTML文件  

<!DOCTYPE html>
<!-- release v4.4.6, copyright 2014 - 2017 Kartik Visweswaran -->
<!--suppress JSUnresolvedLibraryURL -->
<html lang="en">
<head>
      <meta charset="UTF-8"/>
      <title>Krajee JQuery Plugins - &copy; Kartik</title>
      <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css">
      <link rel="stylesheet" type="text/css" href="css/fileinput.css">
      <script type="text/javascript" src="js/jquery.js"></script>
      <script type="text/javascript" src="bootstrap/js/bootstrap.js"></script>
      <script type="text/javascript" src="js/fileinput.js"></script>
        <!-- 中文化,注意locale语言文件在fileinput.min.js文件之后引入 -->
      <script type="text/javascript" src="js/locales/zh.js"></script>
    <!-- /导入导入核心CSS及JS文件 -->
</head>
<body>
<div class="container kv-main">
    <form enctype="multipart/form-data">
        <div class="file-loading">
            <input id="myfile" type="file" multiple>
        </div>
    </form>
</div>
</body>
<script type="text/javascript">
//初始化函数
 function initFileInput(ctrlName, uploadUrl) {
      var control = $('#' + ctrlName);
      control.fileinput({
        resizeImage : true,
        maxImageWidth : 200,
        maxImageHeight : 200,
        resizePreference : 'width',
        language : 'zh', //设置语言
        uploadUrl : uploadUrl,
        uploadAsync : true,
        allowedFileExtensions : [ 'jpg', 'png', 'gif' ],//接收的文件后缀
        showUpload : true, //是否显示上传按钮
        showCaption : true,//是否显示标题
        browseClass : "btn btn-primary", //按钮样式
        previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
        maxFileCount : 3,
        msgFilesTooMany : "选择图片超过了最大数量",
        maxFileSize : 2000,
      });
    };
   //调用初始化函数,传递参数为控件id,与上传路径
    initFileInput("myfile", "#");
</script>

</html>

  

显示截图

 

 

 

 

问题及解决方法

没有问题,共花了五个小时,得了个一知半解,英文文档是硬伤,即使周围都是气势汹汹的面试大军,时局紧张,我还是想安静地恶补计算机英语。

 

 

posted @   yolo_bean  阅读(723)  评论(0编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示