由于工作需要使用Bootstrap的FileInput插件，在此分享下插件的使用方法

直接上代码

fileinput.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <link rel="stylesheet" href="css/bootstrap.min.css" />

        <link rel="stylesheet" href="css/fileinput.css" />

    </head>

    <body>

        <script type="text/javascript" src="js/jquery.js"></script>

        <script type="text/javascript" src="js/bootstrap.min.js"></script>

        <script type="text/javascript" src="js/fileinput.js" ></script>

        <script type="text/javascript" src="js/fileinput_locale_zh.js" ></script>

        <label class="control-label">Select File</label>

        <input id="input-2" name="input2" type="file" class="file-loading">

        <script type="text/javascript">

        var ctrlName = 'input-2';

        var control = $('#' + ctrlName); 

        control.fileinput({

            uploadUrl:'http://localhost:8080/upload.php',

            showCaption: false,

            showCancel:false,

            showUploadedThumbs:false,

            showClose:false,

            autoReplace:true,

            maxFileCount:1,

            overwriteInitial:true,

            showUploadedThumbs:false,

            language:'zh',

            initialPreview:"<img src='/back_t.jpg' class='file-preview-image' />",

            initialPreviewCount:1,

            initialPreviewShowDelete:false,

            layoutTemplates:{

                 actions: '<div class="file-actions">\n' +

        '    <div class="file-footer-buttons">\n' +

        '    </div>\n' +

        '    <div class="file-upload-indicator" tabindex="-1" title="{indicatorTitle}">{indicator}</div>\n' +

        '    <div class="clearfix"></div>\n' +

        '</div>'

            }

        }).on('fileuploaded', function(event, data, previewId, index){ console.log(data.response.message); });

        </script>

    </body>

</html>

uploadFile.php

<?php

if ($_FILES['input2']["type"] == "image/png") {

    echo "{\"code\":0, \"message\":\"upload success!\"}";

} else {

    echo "{\"code\":-1, \"error\":\"Invalid file format\"}";

}

?>

使用截图

上传成功

Bootstrap File Input 的使用的更多相关文章

  1. Bootstrap File Input的简单使用

    安装引入 使用前需要引入其css和js文件, 注意引入路径的问题 <link rel="stylesheet" href="/__PUB__/fileinput/c ...

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

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

  3. bootstrap file input 官方文档翻译

    file Input官方文档 中文翻译 file input 特性 1.这个插件会把简单的html文件变成一个更好用的文件选择输入控件,通过一个html的文件输入框,能兼容那些不支持jquery或js ...

  4. Bootstrap File Input 中文文档

    手动安装 您也可以手动地安装插件到你的项目中.只要下载源ZIP或TAR球和提取资产(CSS和JS插件文件夹)到你的项目中. 使用 步骤1:在你页面头部加载以下类库. <link href=&qu ...

  5. bootstrap file input 多图片上传编辑THINKPHP5

    {layout name="layout" title="文章添加" /} <form id="defaultForm" role=& ...

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

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

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

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

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

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

  9. File Input Features

    文件输入功能 1.该插件将将一个简单的 HTML 文件输入转换为高级文件选取器控件.将有助于对不支持 JQuery 或 Javascript 的浏览器的正常 HTML 文件输入进行回退. 2.文件输入 ...

随机推荐

  1. 【t056】智力问答(链表+计数排序做法)

    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 新年联欢会上,G.Sha负责组织智力问答节目.G.Sha建立了一个很大很大的超级题库,并衡量了每道题的 ...

  2. SDOI2019热闹又尴尬的聚会

    P5361 [SDOI2019]热闹又尴尬的聚会 出题人用脚造数据系列 只要将\(p\)最大的只求出来,\(q\)直接随便rand就能过 真的是 我们说说怎么求最大的\(p\),这个玩意具有很明显的单 ...

  3. 深入学习CSS中如何使用定位

    CSS中定位介绍 position属性在英文单词中表示位置的意思,在CSS中主要作用设置元素的定位. CSS中一共有3种定位如下: 属性值 描述 fixed 设置固定定位. relative 设置相对 ...

  4. Spring Boot + Docker + K8S 简单示例

    前言 最近看了看k8s,感觉用这个管理docker确实比自己写一坨脚本进步太多了,简直不是一个次原的东西. 看着k8s的官方文档随手写了个小Demo,一个基于k8s的spring boot服务. 代码 ...

  5. 如何基于TencentOS tiny，快速打造属于自己的IoT小应用？

    导语 | 近日,云+社区技术沙龙“腾讯开源技术”圆满落幕.本次沙龙邀请了多位腾讯技术专家,围绕腾讯开源与众多开发者进行探讨,深度揭秘了腾讯开源项目TencentOS tiny.TubeMQ.Kona  ...

  6. DOCKER学习_007:Docker的套接字介绍

    根据https://www.cnblogs.com/zyxnhr/p/11825331.html这个文章,已经可以正常安装一个docker服务 查看Docker状态 [root@docker-serv ...

  7. k8s集群———etcd-三节点部署

    etcd集群部署 ,创建etcd可执行文件,配置文件,证书文件存放目录 mkdir /opt/etcd/{bin,cfg,ssl} -p ,创建包文件存放目录 mkdir /soft -p ,解压et ...

  8. $CF938G\ Shortest\ Path\ Queries$ 线段树分治+线性基

    正解:线段树分治+线性基 解题报告: 传送门$QwQ$ 考虑如果只有操作3,就这题嘛$QwQ$ 欧克然后现在考虑加上了操作一操作二 于是就线段树分治鸭 首先线段树叶子节点是询问嘛这个不用说$QwQ$. ...

  9. 洛谷$P$3327 约数个数和 $[SDOI2015]$ 莫比乌斯反演

    正解:莫比乌斯反演 解题报告: 传送门! 先考虑证明一个结论,$d_{i\cdot j}=\sum_{p|i}\sum_{q|j}[gcd(p,q)==1]$ 看起来就很对的样子,但还是证下趴$QwQ ...

  10. 洛谷$P$2123 皇后游戏 贪心

    正解:贪心 解题报告: 传送门! 心血来潮打算把$luogu$提高历练地及其之前的所有专题都打通关,,,$so$可能会写一些比较水的题目的题解$QAQ$ 这种题,显然就套路地考虑交换相邻两个人的次序的 ...