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

时间：2021-10-13 17:12:04

基础用法一

  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 fileinput：文件上传插件的基础用法

问题及解决方法

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

　　

显示截图

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

问题及解决方法

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

Bootstrap fileinput：文件上传插件的基础用法的更多相关文章

  1. bootstrap fileinput 文件上传

    最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...

  2. bootstrap fileinput 文件上传工具

    这是我上传的第二个plugin 首先第一点就是因为这个好看 符合bootstrap的界面风格 第二是可以拖拽(虽然我不常用这个功能 但是这样界面看起来就丰满了很多) 最后不得不吐槽这个的回发事件 我百 ...

  3. 一款基于bootstrap的文件上传插件，现在很多手机webapp都在用

    官网:http://plugins.krajee.com/file-input

  4. Bootstrap 文件上传插件 FileInput的使用问题

    : 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...

  5. 基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  6. Bootstrap文件上传插件File Input的使用

    基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用 Bootstrap文件上传插件File Input是一个不错的文件上传控件, ...

  7. bootstrap File Input 多文件上传插件使用记录（二）删除原文件

    在上一篇文章中,主要介绍了file input插件的初始化和多文件同步上传到服务器的相关配置等.这篇主要介绍file input插件的编辑等. 使用场景: 在后台管理框架中,一条数据中包含不固定的多张 ...

  8. （转）基于Metronic的Bootstrap开发框架经验总结（5）--Bootstrap文件上传插件File Input的使用

    http://www.cnblogs.com/wuhuacong/p/4774396.html Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使 ...

  9. 【精心推荐】几款极好的 JavaScript 文件上传插件

    文件上传功能作为网页重要的组成部分,几乎无处不在,从简单的单个文件上传到复杂的批量上传.拖放上传,需要开发者花费大量的时间和精力去处理,以期实现好用的上传功能.这篇文章向大家推荐几款很棒的 JavaS ...

随机推荐

  1. DropDownList 下拉框选择改变，促发事件和防全局刷新（记录）

    代码: <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:Script ...

  2. mysql半同步复制问题排查

    1.问题背景      默认情况下,线上的mysql复制都是异步复制,因此在极端情况下,主备切换时,会有一定的概率备库比主库数据少,因此切换后,我们会通过工具进行回滚回补,确保数据不丢失.半同步复制则 ...

  3. IQueryable&lt&semi;T&gt&semi; 与 ObjectQuery&lt&semi;T&gt&semi; 差异

    命名空间:System.Data.Objects程序集:  System.Data.Entity(在 System.Data.Entity.dll 中)public class ObjectQuery ...

  4. 剑指Offer 旋转数组的最小数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  5. 从lighttpd学到的代码技巧

    平时写开脚本,很多时候我们都可以不怎样注意效率,但是看c代码的时候,你会发现,才意思自己真的是一个coder啦 1,单位转换 (根据传入的数返回相应的kb,mb,gb等等) 可能我们直觉来想就会这样做 ...

  6. CodeForces 361B &Tab;Levko and Permutation

    题意:有n个数,这些数的范围是[1,n],并且每个数都是不相同的.你需要构造一个排列,使得这个排列上的数与它所在位置的序号的最大公约数满足 > 1,并且这些数的个数恰好满足k个,输出这样的一个排 ...

  7. 设计模式---接口隔离模式之适配器模式（Adapter）

    一:概念 通过Adapter模式可以改变已有类(或外部类)的接口形式 二:动机 在软件系统中,由于应用环境的变化,常常需要将“一些现存的对象”放在新的环境中应用,但是新环境要求的接口是这些现存对象所不 ...

  8. arcface和Dlib人脸识别算法对比

    我司最近要做和人脸识别相关的产品,原来使用的是其他的在线平台,识别率和识别速度很满意,但是随着量起来的话,成本也是越来越不能接受(目前该功能我们是免费给用户使用的),而且一旦我们的设备掉线了就无法使用 ...

  9. centos6&period;4安装 jupyter-notebook

    自上次发布了文章后有些网友就说不能实现效果,根据自己的实验发现确实有此事,那是因为版本的变化问题.这次基于yum仓库里的jupyter notebook 5.0.0版本实现: 系统:最小化安装[习惯性 ...

  10. 铁轨&lpar;rails&comma; ACM&sol;ICPC CERC 1997&comma;Uva 514&rpar;

    铁轨(rails, ACM/ICPC CERC 1997,Uva 514) 题目描述 某城市有一个火车站,铁轨铺设如图所示.有n节车厢从A方向驶入车站,按进站顺序编号为1~n.你的任务是让它们按照某种 ...

相关文章