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. FPGA基础学习(1) -- FFT IP核（Quartus）

    为了突出重点,仅对I/O数据流为steaming的情况作简要说明,以便快速上手,有关FFT ip核模型及每种设置详细介绍请参考官方手册FFT MegaCore Function User Guide. ...

  2. react 中文文档案例五 （循环列表）

    function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) = ...

  3. POJ1053 Set Me

    题目来源:http://poj.org/problem?id=1053 题目大意: 有一种牌,共有81张.每张牌有四个属性,每种属性有三种可能取值:形状(D,O,S),数字(1,2,3),颜色(R,G ...

  4. js常用代码收集

    1. PC - js 返回指定范围的随机数(m-n之间)的公式 Math.random()*(n-m)+m return false return false // event.preventDefa ...

  5. Mybatis学习笔记(一) —— mybatis介绍

    一.Mybatis介绍 MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名 ...

  6. 关于dubbo服务的xml配置文件报错的问题——The matching wildcard is strict, but no declaration can be found for element 'dubbo:application'

    在配置dubbo服务的过程中,经常会遇到虽然程序能够跑起来,但是配置文件一堆红叉,虽然不影响功能,但是确实很让人恶心. 报错信息如下: 解决方案: 下载一个dubbo.xsd文件(就在dubbo.ja ...

  7. CF653D

    题目唯一的坎就是把绝对的权值变为相对的权值,保证cap和flow是整型的同时可以用最小的1表示一只熊 可是迷的地方在于用kuangbin的板子居然能找出比答案更大的流(Wrong Answer on ...

  8. aerospike（2）-java client

    地址:https://www.aerospike.com/download/client/java/4.3.1/ 例子顺序:https://github.com/aerospike/aerospike ...

  9. java——注解Annotation

    http://www.cnblogs.com/xdp-gacl/p/3622275.html 元注解: @Retention:当 @Retention 应用到一个注解上的时候,它解释说明了这个注解的的 ...

  10. 使用EventBus实现兄弟组件之间的通信

    使用EventBus实现兄弟组件之间的通信 需求:为了实现菜单折叠的效果,例如http://blog.gdfengshuo.com/example/work/#/dashboard header组件和 ...