由于工作需要使用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. linux 内核定时器的实现

    为了使用它们, 尽管你不会需要知道内核定时器如何实现, 这个实现是有趣的, 并且值得 看一下它们的内部. 定时器的实现被设计来符合下列要求和假设: 定时器管理必须尽可能简化. 设计应当随着激活的定时器 ...

  2. Docker应用容器引擎

    1.Docker概述 1.1.Docker简介 Docker 是一个开源的应用容器引擎,基于 Go 语言开发.Docker 可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发布到 ...

  3. Wanafly 挑战赛 14 E 无效位置 （线性基+并查集）

    Wanafly 挑战赛 14 E 无效位置 (线性基+并查集) 传送门:https://ac.nowcoder.com/acm/contest/81/#question 题意: n个数,m次操作 一个 ...

  4. windows下使用cmake+mingw配置makefile

    前面一节说了cmake简易使用,但是实际开发中项目文件非常多,使用哪种简易方式会导致代码十分混乱,因此本文介绍一种cmake管理大型项目的demo流程. 具体步骤如下: 1.创建相关的项目目录 cmd ...

  5. android studio 配置HTTP proxy

    Android SDK在线更新镜像服务器 南阳理工学院镜像服务器地址: mirror.nyist.edu.cn 端口:80 中国科学院开源协会镜像站地址: IPV4/IPV6: mirrors.ope ...

  6. JMeter FTP测试计划

    为了演示测试目的,我们将使用公共可用的FTP位置,可以使用它来测试文件的下载. 您可以使用市场上现有的任何可用的演示FTP位置.我们使用URL下的FTP位置: https://dlptest.com/ ...

  7. 第三阶段：3.Web端产品设计：3.产品设计的层次

    一般淘宝购物的五个流程:浏览对应表现层,搜索对应框架层,产品页面对应架构层,确认对应范围层,付款对应战略层. 从具象到抽象.但是我们做产品都是从抽象到具象,而用户使用产品是从具象到抽象. 各个层次之间 ...

  8. javascript继承的几种方法

    继承是面向对象编程中很重要的概念,在其它面向对象的语言中大都很简单,例如java中有关键词extends来实现 javascript语言在ES6也新增了extends关键词可以实现继承,用法与java ...

  9. GNE: 4行代码实现新闻类网站通用爬虫

    GNE(GeneralNewsExtractor)是一个通用新闻网站正文抽取模块,输入一篇新闻网页的 HTML, 输出正文内容.标题.作者.发布时间.正文中的图片地址和正文所在的标签源代码.GNE在提 ...

  10. CEF编译遇到的问题记录

    在使用vs2015编译cef官方代码的时候遇到很奇怪的问题, 我用官方的demo cefsimple例子程序编译debug版本 可以正常编译打开网页 正常的打开 我把官方的例子单独创建一个新的项目编译 ...