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. pytorch 0.4.1安装问题

    环境 ubuntu 16.04, anaconda3, python 2.7 将pytorch升级为0.4.1后,import torch报错 undefined symbol: _ZN4thpp10 ...

  2. Liunx 发送邮件

    可以使用rpm -qa | grep mailx查看系统自带的mailx版本. 使用wget http://sourceforge.net/projects/heirloom/files/latest ...

  3. Codeforces Round #305 (Div. 2) B

    Description Mike and some bears are playing a game just for fun. Mike is the judge. All bears except ...

  4. 支付宝支付集成中：refund_fastpay_by_platform_nopwd接口服务器通知验签不通过

    在做p2p配资平台,也就是公司的项目,遇到了一个问题:refund_fastpay_by_platform_nopwd接口服务器通知验签不通过 下面是实录: 通知服务器的POST过来的数据: 1.si ...

  5. sql CET实现循环

    表结构 CREATE TABLE city( id INT IDENTITY(1,1) PRIMARY KEY, NAME NVARCHAR(100), ParentID INT , Parents ...

  6. angularJs(2)表单中下拉框单选多选

    多选 <input type="checkbox" ng-model='game' ng-true-value="1" ng-false-value=&q ...

  7. git知识点总结

    集中式版本控制系统,版本库是集中存放在中央服务器的,而干活的时候,用的都是自己的电脑,所以要先从中央服务器取得最新的版本,然后开始干活,干完活了,再把自己的活推送给中央服务器.集中式版本控制系统最大的 ...

  8. Indexing the World Wide Web: the Journey So Far阅读笔记

    文献文档用google搜索标题即可. term预处理:用空格切分,去除标点,去除撇号,归一化小写,去除变音符号,词干还原(?),去除停用词,挖掘词组. 索引选型工程最佳实践:term粒度.按doc分块 ...

  9. Murano Deployment

    2015-09-14 05:53:02 — Action deploy is scheduled 2015-09-14 05:53:03 — Unable to load due to 'could ...

  10. (转)iptables简介

    iptables简介 原文:https://www.cnblogs.com/metoy/p/4320813.html netfilter/iptables(简称为iptables)组成Linux平台下 ...