参考博客：https://blog.csdn.net/linhaiyun_ytdx/article/details/76215974

　　　　　 https://www.cnblogs.com/parker-yu/p/7207071.html

最近在最接口对接，需要将文件和一些其他参数发送到其他系统中去，发送文件用到了bootstrap fileinput。

一、首先要下载插件包

　　插件下载地址：https://github.com/kartik-v/bootstrap-fileinput/

二、引入js和css文件　　

<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">

<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>

<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>

三、代码：

　　1、页面文件　　

<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@include file="/context/mytags.jsp"%>

<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/css/fileinput.min.css">

<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/fileinput.min.js"></script>

<script src="<%=request.getContextPath()%>/plug-in/bootstrap-fileinput/js/locales/zh.js"></script>

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>bootstrap fileinput上传</title>

</head>

<body>

<div align="center">

    <div class="container-fluid" style="width: 90%; margin-top: 2%">

        <form class="form-horizontal" id="form" action="" method="post" enctype="multipart/form-data">

            <div class="form-group">

                <label for="exec_file" class="col-sm-2 control-label">上传文件<font color="red">*</font>:</label>

                <div class="col-sm-10">

                    <input id="input-id" name="file" multiple type="file" data-show-caption="true" data-show-preview="false">

                </div>

            </div>

            <div class="form-group">

                <label for="name" class="col-sm-2 control-label">文件名称<font color="red">*</font>:</label>

                <div class="col-sm-10">

                    <input type="text" class="form-control" id="name" placeholder="请输入文件名称">

                </div>

            </div>

            <div class="form-group">

                <label for="description" class="col-sm-2 control-label">描述:</label>

                <div class="col-sm-10">

                    <textarea rows="3" cols="2" class="form-control" id="description" placeholder="请输入描述"></textarea>

                </div>

            </div>

        </form>

    </div>

</div>

<script>

    $(function() {

        initFileInput("input-id");

    })

    function initFileInput(ctrlName) {

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

        control.fileinput({

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

            uploadUrl : "addScriptJson.do", //上传的地址

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

            maxFilesNum : 5,//上传最大的文件数量

            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},

            uploadAsync : true, //默认异步上传

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

            showRemove : true, //显示移除按钮

            showPreview : true, //是否显示预览

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

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

            //dropZoneEnabled: true,//是否显示拖拽区域

            //minImageWidth: 50, //图片的最小宽度

            //minImageHeight: 50,//图片的最小高度

            //maxImageWidth: 1000,//图片的最大宽度

            //maxImageHeight: 1000,//图片的最大高度

            maxFileSize : 0,//单位为kb，如果为0表示不限制文件大小

            //minFileCount: 0,

            //maxFileCount: 10, //表示允许同时上传的最大文件个数

            enctype : 'multipart/form-data',

            validateInitialCount : true,

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

            msgFilesTooMany : "选择上传的文件数量({n}) 超过允许的最大数值{m}！",

            uploadExtraData:function (previewId, index) {

                //向后台传递的额外参数

                var otherData = getdata();

                return otherData;

            }

        }).on('filepreupload',function(event, data, previewId, index) { //上传中

            var form = data.form, files = data.files, extra = data.extra, response = data.response, reader = data.reader;

            console.log('文件正在上传');

        }).on("fileuploaded",function(event, data, previewId, index) { //一个文件上传成功

            console.log('文件上传成功！' + data.id);

        }).on('fileerror', function(event, data, msg) { //一个文件上传失败

            console.log('文件上传失败！' + data.id);

        })

    }

    function getdata(){

        var name = $("#name").val() ;

        var description = $("#description").val() ;

        var scriptJson = {

            "name": name,

            "description": description

        }

        return scriptJson;

    }

</script>

</body>

　　2、后台代码

@Description("新增脚本信息")

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

@ResponseBody

public String addScriptJson(@RequestParam MultipartFile file, HttpServletRequest request, HttpServletResponse response) {

        String name = request.getParameter("name");

        String description = request.getParameter("description");

        System.out.println(name);

        System.out.println(description);

        String filePath = "";// jar包的路径

        if (!file.isEmpty()) {

            File temp = new File("");

            filePath = temp.getAbsolutePath() + "\\" + file.getOriginalFilename();

            BufferedOutputStream out;

            try {

                out = new BufferedOutputStream(new FileOutputStream(new File(filePath)));

                out.write(file.getBytes());

                out.flush();

                out.close();

            } catch (FileNotFoundException e) {

                e.printStackTrace();

            } catch (IOException ex) {

                ex.printStackTrace();

            }

        }

        AjaxJson ajaxJson = new AjaxJson();

        try {

　　　　　　　　// 这里处理业务逻辑

        } catch (Exception e) {

            ajaxJson.setSuccess(false);

            ajaxJson.setMsg(e.getMessage());

            e.printStackTrace();

        }

        return ajaxJson.getJsonStr();

    }

bootstrap fileinput上传文件的更多相关文章

  1. bootstrap fileinput 上传文件

    最近用到文件上传功能, 说实话:以前遇到过一次,COPY了别人的代码 结束! 这次又要用,可是看到别人很酷的文件上传功能,心痒了! 好吧.简单的办法,找控件: bootstrap fileinput ...

  2. .net core版 文件上传/ 支持批量上传，拖拽以及预览，bootstrap fileinput上传文件

    asp.net mvc请移步 mvc文件上传支持批量上传,拖拽以及预览,文件内容校验 本篇内容主要解决.net core中文件上传的问题  开发环境:ubuntu+vscode 1.导入所需要的包:n ...

  3. Bootstrap FileInput 上传 中文 API 整理

    Bootstrap FileInput 上传  中文 API 整理 上传插件有很多 但是公司用的就是 Bootstrap FileInput 自己就看了看  会用就行 自己都不知道每个值是干嘛用的就问 ...

  4. 使用bootstrap创建上传文件

    1.导入样式,注意顺序 <!-- bootstrap样式 --> <link rel="stylesheet" href="/static/bootst ...

  5. bootstrap改变上传文件按钮样式，并显示已上传文件名

    参考博文: html中,文件上传时使用的<input type="file">的样式自定义 html中<input type="file"&g ...

  6. 关于Bootstrap fileinput 上传新文件，移除时触发服务器同步删除的配置

    在Bootstrap fileinput中移除预览文件时可以通过配置initialPreviewConfig: [ { url:'deletefile',key:fileid } ] 来同步删除服务器 ...

  7. bootstrap fileinput上传返回400，404，500 等错误替换

    $(".uploadfile").on('filebatchuploaderror', function(event, data, msg) { $(".file-err ...

  8. 基于bootstrap的上传插件fileinput实现ajax异步上传功能(支持多文件上传预览拖拽)

    首先需要导入一些js和css文件 ? 1 2 3 4 5 6 <link href="__PUBLIC__/CSS/bootstrap.css" rel="exte ...

  9. 【Bootstrap】bootstrap-fileinput上传文件插件

    [bootstrap-fileinput] 这是个据传最好用的bootstrap相关联的文件上传控件,支持拖曳上传,多线程上传,上传文件预览等等功能. 首先还是说一下要引入的一些文件: <lin ...

随机推荐

  1. es报错org.frameworkset.elasticsearch.ElasticSearchException: {"error":{"root_cause":[{"type":"cluster_block_exception","reason":"blocked by: [FORBIDDEN/12/index read-only / allow delete (api)];"}],

    今天es在保存数据的时候报错 org.frameworkset.elasticsearch.ElasticSearchException: {"error":{"root ...

  2. SMTS Silicon Design Engineer Location: Beijing, Beijing, CN

    https://jobs.amd.com/job/Beijing-Physical-Design-Engineer-Beij/603603700/?locale=en_US What you do a ...

  3. Docker最全教程——从理论到实战（九）

    使用Tencent Hub来完成CI 关于Tencent Hub Tencent Hub是腾讯出品的DevOps服务.主要提供多存储格式的版本管理,支持Docker Image.Binary.Helm ...

  4. go语言 RSA数字签名和验证签名

    package main import ( "crypto" "crypto/rand" "crypto/rsa" "crypto ...

  5. Python中super的用法【转载】

    Python中super的用法[转载] 转载dxk_093812 最后发布于2019-02-17 20:12:18 阅读数 1143  收藏 展开 转载自 Python面向对象中super用法与MRO ...

  6. 2019牛客训练赛第七场 C Governing sand 权值线段树+贪心

    Governing sand 题意 森林里有m种树木,每种树木有一定高度,并且砍掉他要消耗一定的代价,问消耗最少多少代价可以使得森林中最高的树木大于所有树的一半 分析 复杂度分析:n 1e5种树木,并 ...

  7. centos7下使用selenium实现文件上传

    1.pip install SendKeys 2. 利用js去掉元素的隐藏属性,然后输入: 一般控制元素显示或隐藏是用display属性来实现的 style.display = “none”,表示元素 ...

  8. Big research problems (1)

    1. how to measure the uncertainty of prediction model or data analysis? 2.

  9. Postgresql 教程

    Official 教程 关闭postgresql服务 PostgreSQL帐号 1. PostgreSQL 用户帐号和操作系统用户帐号是不同的,系统用户帐号是postgres. sudo -u pos ...

  10. TD - setAttribute()

    添加指定的属性,并为其赋指定的值 this.sltLevelType.setAttribute("height", "100px");