bootstrap-fileinput 简单使用

bootstrap-fileinput 是一款图片/文件上传 bootstrap 插件，简单示例代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

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

    <link href="/lib/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

    <script src="/lib/jquery/dist/jquery.min.js"></script>

    <script src="/lib/bootstrap-fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

    <script src="/lib/bootstrap-fileinput/js/fileinput.min.js"></script>

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

    <script src="/lib/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>

</head>

<body>

    <input id="fileinput" name="fileinput" type="file" multiple accept="image/*" class="file-loading">

    <script>

        $("#fileinput").fileinput({

            language: 'zh',

            uploadUrl: "/ajax/upload",

            uploadAsync: true,

            allowedFileExtensions: ['jpg', 'gif', 'png', 'jpeg']

        });

        //上传成功后执行

        $("#fileinput").on("fileuploaded", function (event, data, previewId, index) {

            console.log(data.response.msg);

        });

    </script>

</body>

</html>

后端代码：

public class AjaxController : Controller

{

    public IActionResult Upload()

    {

        var file = HttpContext.Request.Form.Files[0];

        return Json(new { success = true, msg = "image url after upload" });

    }

}

演示效果：

头像上传示例代码：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

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

    <link href="/lib/bootstrap-fileinput/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

    <script src="/lib/jquery/dist/jquery.min.js"></script>

    <script src="/lib/bootstrap-fileinput/js/plugins/canvas-to-blob.min.js" type="text/javascript"></script>

    <script src="/lib/bootstrap-fileinput/js/fileinput.min.js"></script>

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

    <script src="/lib/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>

</head>

<body>

    <style>

        .kv-avatar .file-preview-frame, .kv-avatar .file-preview-frame:hover {

            margin: 0;

            padding: 0;

            border: none;

            box-shadow: none;

            text-align: center;

        }

        .kv-avatar .file-input {

            display: table-cell;

            max-width: 220px;

        }

    </style>

    <!-- the avatar markup -->

    <div id="kv-avatar-errors-1" class="center-block" style="width:800px;display:none"></div>

    <form class="text-center" action="/ajax/upload" method="post" enctype="multipart/form-data">

        <div class="kv-avatar center-block" style="width:200px">

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

        </div>

    </form>

    <script>

        $("#fileinput").fileinput({

            language: 'zh',

            overwriteInitial: true,

            maxFileSize: 1500,

            showClose: false,

            showCaption: false,

            browseLabel: '',

            removeLabel: '',

            browseIcon: '<i class="glyphicon glyphicon-folder-open"></i>',

            removeIcon: '<i class="glyphicon glyphicon-remove"></i>',

            removeTitle: 'Cancel or reset changes',

            elErrorContainer: '#kv-avatar-errors-1',

            msgErrorClass: 'alert alert-block alert-danger',

            defaultPreviewContent: '<img src="/images/default_avatar_male.jpg" alt="Your Avatar" style="width:160px">',

            layoutTemplates: { main2: '{preview} {upload} {browse}' },

            allowedFileExtensions: ["jpg", "png", "gif"]

        });

        //上传成功后执行

        $("#fileinput").on("fileuploaded", function (event, data, previewId, index) {

            console.log(data.response.msg);

        });

    </script>

</body>

</html>

演示效果：

参考资料：

bootstrap-fileinput 简单使用的更多相关文章

bootstrap fileinput控件 + django后台上传、回显简单使用
一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...
JS组件系列——Bootstrap文件上传组件：bootstrap fileinput
前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...
bootstrap fileinput添加上传成功回调事件
国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...
结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程
1.bootstrap-fileinpu的简单介绍在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...
bootstrap fileinput 使用记录
第一次使用bootstrap fileinput碰到了许多坑,做下记录需求本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...
BootStrap fileinput.js文件上传组件实例代码
1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...
JS文件上传神器bootstrap fileinput详解
Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...
bootstrap fileinput插件使用感悟
bootstrap fileinput 的填坑感悟这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...
bootstrap fileinput 文件上传
最近因为项目需要研究了下bootstrap fileinput的使用,来记录下这几天的使用心得吧. 前台html页面的代码 <form role="form" id=&quo ...
Bootstrap FileInput 多图上传插件文档属性说明
Bootstrap FileInput 多图上传插件原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

随机推荐

简谈百度坐标反转至WGS84的三种思路
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景基于百度地图进行数据展示是目前项目中常见场景,但是因为百度地图 ...
前端框架 EasyUI （0）重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
匹夫细说C#：庖丁解牛迭代器，那些藏在幕后的秘密
0x00 前言在匹夫的上一篇文章<匹夫细说C#:不是“栈类型”的值类型,从生命周期聊存储位置>的最后,匹夫以总结和后记的方式涉及到一部分迭代器的知识.但是觉得还是不够过瘾,很多需要说清楚 ...
.NET里简易实现AOP
.NET里简易实现AOP 前言在MVC的过滤器章节中对于过滤器的使用就是AOP的一个实现了吧,时常在工作学习中遇到AOP对于它的运用可以说是很熟练了,就是没想过如果自己来实现的话是怎么实现的,性子比 ...
Apache 与 php的环境搭建
Apache和PHP的版本分别为: httpd-2.4.9-win64-VC11.zip php-5.6.9-Win32-VC11-x64.zip 下载地址: php-5.6.9-Win32-VC11 ...
DB1：数据库的创建和文件的修改
在SQL Server中,使用Create Database创建数据库,使用Alter Database命令,能够修改数据库的数据文件和日志文件. 一,创建数据库 1,在创建数据库时,最佳实践是: 创 ...
23种设计模式--观察者模式-Observer Pattern
一.观察者模式的介绍观察者模式从字面的意思上理解,肯定有两个对象一个是观察者,另外一个是被观察者,观察者模式就是当被观察者发生改变得时候发送通知给观察者,当然这个观察者可以是多个对象,在项 ...
转：serialVersionUID作用
汗,以前学了还忘了... Java的序列化机制是通过在运行时判断类的serialVersionUID来验证版本一致性的.在进行反序列化时,JVM会把传来的字节流中的serialVersionUID与本 ...
win8.1硬盘安装ubuntu14.04双系统
在网上找了很多方法都失败了,原因是大多数方法都是用mbr方式安装的,如grub4dos,easybcd.以至于连自己都怀疑win8能不能用硬盘安装,差点就去买个u盘来安装了,就在打算放弃的时候在ubu ...
谈一谈NOSQL的应用，Redis/Mongo
1.心路历程上年11月份来公司了,和另外一个同事一起,做了公司一个移动项目的微信公众号,然后为了推广微信公众号,策划那边需要我们做一些活动,包括抽奖,投票.最开始是没有用过redis的,公司因为考虑 ...

bootstrap-fileinput 简单使用

bootstrap-fileinput 简单使用的更多相关文章

随机推荐

热门专题