码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-10-16 22:17:15      阅读:317      评论:0      收藏:0      [点我收藏+]

标签:lin   img   for   依赖   file类   javascrip   ext   表单   net   

基础用法

  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文件夹,保证万无一失嘛

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

标签:lin   img   for   依赖   file类   javascrip   ext   表单   net   

原文地址:http://www.cnblogs.com/yolo-bean/p/7678486.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!