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. mac os x忘记了root密码怎么办，忘记登录密码（普通帐号密码）也是一样的

    有时候我们给mac设置了root密码,一段时间不用,却忘记了密码,怎么办?下面的办法帮你解决: 步骤1:先关闭你的mac系统 步骤2:开机,按住Command和s两个按键不松手直到出现下面的界面: 步 ...

  2. Python：raw_input 和 input用法

    转自:http://blog.csdn.net/kjing/article/details/7450146 Python input和raw_input的区别 使用input和raw_input都可以 ...

  3. Set\HashSet集合为什么能去重（转）

    如果想查找一个集合中是否包含有某个对象,大概的程序代码怎样写呢?当发现某个元素与要查找的对对象进行equals方法比较的结果相等时,则停止继续查找并返回肯定的信息,否则返回否定的信息.如果是一个集合中 ...

  4. js常用代码收集

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

  5. day34 协程

    1.   前提 之前我们学习了线程.进程的概念,了解了在操作系统中进程是资源分配的最小单位,线程是CPU调度的最小单位.按道理来说我们已经算是把cpu的利用率提高很多了.但是我们知道无论是创建多进程还 ...

  6. CHUCK手把手带你搞定OPENSTACK

    一.OpenStack初探 1.1 OpenStack简介 OpenStack是一整套开源软件项目的综合,它允许企业或服务提供者建立.运行自己的云计算和存储设施.Rackspace与NASA是最初重要 ...

  7. 一个基于QT简单登录对话框

    1. 登录对话框式样 2. QLoginDialog.h #ifndef DIALOG_H #define DIALOG_H #include <QtGui/QDialog> #inclu ...

  8. 搭建 flask 应用

    参考文档:http://docs.jinkan.org/docs/flask/quickstart.html#a-minimal-application 1.使用Pycharm创建Flask应用 fr ...

  9. PHP artisan

    Artisan 是 Laravel 提供的 CLI(命令行接口),它提供了非常多实用的命令来帮助我们开发 Laravel 应用.前面我们已使用过 Artisan 命令来生成应用的 App Key 和控 ...

  10. Nuxt 2.3.X 配置babel

    1. 在package.json中修改运行脚本 添加--exec babel-node 添加之后的效果为:(修改了8/10行) { "name": "nuxt-learn ...