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

• 官网地址:http://plugins.krajee.com/
• 官网提供的样例：http://plugins.krajee.com/file-input/demo

基础用法一

1. 导入核心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>
   

2. 基本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>
   

3. 初始化fileinput插件

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

完整的HTML文件　　

<!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类型的表单的样式

   <div class="container kv-main">
       <form enctype="multipart/form-data">
           <div class="file-loading">
               <input id="myfile" type="file" multiple>
           </div>
       </form> 
   </div>

3. 初始化fileinput插件

   <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文件　　

<!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>

　　

显示截图

问题及解决方法

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