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 简单使用的更多相关文章

  1. bootstrap fileinput控件 + django后台上传、回显简单使用

    一.控件下载:https://github.com/kartik-v/bootstrap-fileinput/ 官网:http://plugins.krajee.com/file-input 需要引入 ...

  2. JS组件系列——Bootstrap文件上传组件：bootstrap fileinput

    前言:之前的三篇介绍了下bootstrap table的一些常见用法,发现博主对这种扁平化的风格有点着迷了.前两天做一个excel导入的功能,前端使用原始的input type='file'这种标签, ...

  3. bootstrap fileinput添加上传成功回调事件

    国外牛人做的bootstrap fileinput挺酷的,但是可惜没有提供自定义上传成功回调事件的接口,因此感到非常头疼,但是很幸运的是,我在网上搜索到一个提问帖子,它问到使用Jquery的on函数绑 ...

  4. 结合bootstrap fileinput插件和Bootstrap-table表格插件，实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  5. bootstrap fileinput 使用记录

    第一次使用bootstrap fileinput碰到了许多坑,做下记录 需求 本次使用bootstrap fileinput文件上传组件,主要用来上传和预览图片.作为一个后台管理功能,为某个表的某个字 ...

  6. BootStrap fileinput.js文件上传组件实例代码

    1.首先我们下载好fileinput插件引入插件 ? 1 2 3 <span style="font-size:14px;"><link type="t ...

  7. JS文件上传神器bootstrap fileinput详解

    Bootstrap FileInput插件功能如此强大,完全没有理由不去使用,但是国内很少能找到本插件完整的使用方法,于是本人去其官网翻译了一下英文说明文档放在这里供英文不好的同学勉强查阅.另外附上一 ...

  8. bootstrap fileinput插件使用感悟

    bootstrap fileinput 的填坑感悟              这个插件在demo的网站地址http://plugins.krajee.com/file-preview-icons-de ...

  9. bootstrap fileinput 文件上传

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

  10. Bootstrap FileInput 多图上传插件 文档属性说明

    Bootstrap FileInput 多图上传插件   原文链接:http://blog.csdn.net/misterwho/article/details/72886248?utm_source ...

随机推荐

  1. 如何一步一步用DDD设计一个电商网站（九）—— 小心陷入值对象持久化的坑

    阅读目录 前言 场景1的思考 场景2的思考 避坑方式 实践 结语 一.前言 在上一篇中(如何一步一步用DDD设计一个电商网站(八)—— 会员价的集成),有一行注释的代码: public interfa ...

  2. 初识Hadoop、Hive

    2016.10.13 20:28 很久没有写随笔了,自打小宝出生后就没有写过新的文章.数次来到博客园,想开始新的学习历程,总是被各种琐事中断.一方面确实是最近的项目工作比较忙,各个集群频繁地上线加多版 ...

  3. JS核心系列：理解 new 的运行机制

    和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 ...

  4. 《Django By Example》第三章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第三章滚烫出炉,大家请不要吐槽文中 ...

  5. ASP.NET MVC5+EF6+EasyUI 后台管理系统（64）-补充WebApi与Unity注入-配置文件

    系列目录 上一篇演示了WebApi利用Unity注入 很多人问我如何用配置文件来配置注入,本节演示如何利用配置文件来注入,道理是一样的,跳转到上一节下载源码一起来动手! 1.打开源码定位到文件Depe ...

  6. [C#] C# 知识回顾 - 异常介绍

    异常介绍 我们平时在写程序时,无意中(或技术不够),而导致程序运行时出现意外(或异常),对于这个问题, C# 有专门的异常处理程序. 异常处理所涉及到的关键字有 try.catch 和 finally ...

  7. 【Reading Note】算法读书杂记

    1 排序 排序基本信息 稳定性:排序前大的数在排序后,大的数依然保持不变就是稳定排序,反之不稳定 内外排序:根据待排序的记录是否放在内存里面区分的.诸如:插入排序(直接插入&希尔).交换排序( ...

  8. js报错： Uncaught RangeError: Invalid string length

    在ajax请求后得到的json数据,遍历的时候chrome控制台报这个错误:Uncaught RangeError: Invalid string length,在stackoverflow查找答案时 ...

  9. 真假4K电视验证：一张图足矣

    国庆期间笔者逛了一下电视卖场,考虑到国内电视台以及宽带的情况,1080P至少还能用十年,所以只想要个2k电视就够了.然而事与愿违,卖场中八成的都是4k电视,清一色的4k电视让人眼花缭乱.难道4k面板技 ...

  10. Maven搭建SpringMVC+Hibernate项目详解 【转】

    前言 今天复习一下SpringMVC+Hibernate的搭建,本来想着将Spring-Security权限控制框架也映入其中的,但是发现内容太多了,Spring-Security的就留在下一篇吧,这 ...