Bootstrap FileInput中文API整理：https://blog.csdn.net/u012526194/article/details/69937741

SpringMVC + bootstrap fileupload 多文件上传：https://blog.csdn.net/fanxiangru999/article/details/61927385

bootstrap fileupload 使用详解：https://blog.csdn.net/fanxiangru999/article/details/63756730

源码以及API地址：

bootstrap-fileinput源码：https://github.com/kartik-v/bootstrap-fileinput

bootstrap-fileinput在线API：http://plugins.krajee.com/file-input

bootstrap-fileinput Demo展示：http://plugins.krajee.com/file-basic-usage-demo

前后端单文件上传代码：

    @ResponseBody

    @RequestMapping(value="/upload", method = RequestMethod.POST)

    public JSONObject upload(@RequestParam("file") MultipartFile file, HttpServletRequest request ) {

        System.out.println("上传开始");

        JSONObject json = new JSONObject();

        json.put("code", "1");

        if( file.isEmpty() ) {

            json.put("msg", "上传文件为空");

            return json;

        }else {

            String savePath = request.getServletContext().getRealPath("/upload/");

            String fileName=file.getOriginalFilename();

            String pathname = savePath + fileName;

            File dest = new File(pathname);

            if( !dest.getParentFile().exists() ) {

                dest.getParentFile().mkdirs();

            }

            try {

                file.transferTo(dest);

                json.put("code", 1);

                json.put("msg", "上传成功");

                json.put("imgPath", pathname);

                return json;

            } catch (Exception e) {

                json.put("msg", e.getMessage());

                return json;

            }

        }

    }
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()

            + path + "/";

%>

<!DOCTYPE html>

<!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->

<html lang="en">

    <head>

        <meta charset="UTF-8"/>

        <title>上传文件测试</title>

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

        <link href="<%=basePath%>css/fileinput.min.css" media="all" rel="stylesheet" type="text/css" />

        <script src="<%=basePath%>js/jquery-3.2.1.min.js"></script>

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

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

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

    </head>

    <body>

        <div class="container">

            <div class="row" style="height: 500px">

                <input id="file-0" class="file" type="file" multiple data-min-file-count="1" name="file">

            </div>

        </div>

        <script type="text/javascript">

            //初始化fileinput控件（第一次初始化）

            function initFileInput(ctrlName, uploadUrl) {

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

                control.fileinput({

                    language: 'zh', //设置语言

                    uploadUrl: uploadUrl, //上传的地址

                    allowedFileExtensions : ['jpg', 'png','gif'],//接收的文件后缀

                    showUpload: true, //是否显示上传按钮

                    showCaption: false,//是否显示标题

                    browseClass: "btn btn-primary", //按钮样式

                    previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",

                });

            }

            //初始化fileinput控件（第一次初始化）

            initFileInput("file-0", "/upload");

        </script>

    </body>

</html>

bootstrap文件上传fileupload插件的更多相关文章

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

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

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

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

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

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

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

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

  5. Bootstrap文件上传组件

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

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

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

  7. Bootstrap文件上传组件：bootstrap fileinput

    为了上传预览pdf与图片特用此插件. 源码以及API地址: bootstrap-fileinput源码:https://github.com/kartik-v/bootstrap-fileinput ...

  8. python 全栈开发，Day75(Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件)

    昨日内容回顾 基于对象的跨表查询 正向查询:关联属性在A表中,所以A对象找关联B表数据,正向查询 反向查询:关联属性在A表中,所以B对象找A对象,反向查询 一对多: 按字段:xx book ----- ...

  9. Django与Ajax,文件上传,ajax发送json数据,基于Ajax的文件上传,SweetAlert插件

    一.Django与Ajax AJAX准备知识:JSON 什么是 JSON ? JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻 ...

随机推荐

  1. CF .Beautiful numbers 区间有多少个数字是可以被它的每一位非零位整除。（数位DP）

    题意:数字满足的条件是该数字可以被它的每一位非零位整除. 分析:大概的思路我是可以想到的 , 但没有想到原来可以这样极限的化简 , 在数位dp 的道路上还很长呀 : 我们都知道数位dp 的套路 , 核 ...

  2. WebApi Helper帮助文档 swagger

      http://www.it165.net/pro/html/201602/61437.htmlhttp://www.cnblogs.com/gossip/p/4546630.html       ...

  3. Problem08 输入数字求和

    题目:求s=a+aa+aaa+aaaa+aa...a 的值,其中a 是一个数字.例如2+22+222+2222+22222(此时共有5 个数相加),几个数相加有键盘控制. 程序分析:关键是计算出每一项 ...

  4. 6-----selenuim和phantonJs处理网页动态加载数据的爬取

    动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材http://sc.chinaz.com/中的图片数据 #!/usr/bin/env python # -*- coding ...

  5. 在新项目下使用rbc权限

    例子说明: 8 个步骤 1. 拷贝rabc这个app到项目中 2. 把迁移过来的rbac下migrations记录删除 3. 把rabc注册到项目中 4. 创建数据库迁移 5. 注册admin,录入数 ...

  6. Hibernate通过自编写Sql修改

    @Override public void updateTemMsg(String ticket,String time) { String sql="UPDATE INTER_TEMPTO ...

  7. SQL datetime和smalldatetime区别

    datetime 存储大小8个字节,精确到分后的3为小数,日期范围从1753 年 1 月 1 日到 9999 年 12 月 31 日:而 smalldatetime存储大小为4个字节,精确到分,日期范 ...

  8. 性能测试工具Jmeter07-Jmeter性能测试实战

    测试需求:测试20个用户访问www.baozhenart.com在负载达到30QPS时的平均响应时间 QPS:Query Per Second每秒查询率.是一台查询服务器每秒能够处理的查询次数.在因特 ...

  9. [转]JavaScriptSerializer中日期序列化

    本文转自:http://www.cnblogs.com/songxingzhu/p/3816309.html 直接进入主题: class Student { public int age { get; ...

  10. 聊一聊IAR的workspace文件组织

    抽空偶尔做个zigbee实验其实也挺好玩的,今天我就来总结一下嵌入式IAR Embedded Workbench这个非常有效的集成开发环境的文件组织. 每一个workspace由一般是由.c文件和一个 ...