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

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

基础用法一

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

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

初始化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文件夹，保证万无一失嘛

基础用法二

导入核心CSS及JS文件，同基础用法一

基本file类型的表单的样式

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

初始化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>


<html lang="en">
<head>
      <meta charset="UTF-8"/>
      <title>Krajee JQuery Plugins - © 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>
        
      <script type="text/javascript" src="js/locales/zh.js"></script>
    
</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 @ 2017-10-16 19:37 yolo_bean 阅读(693) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部