参考博客：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. 题解 CF1064A 【Make a triangle!】

    题目传送门 反正数学方法我是不会 那只能模拟了一只连模拟题解都看不懂的哀怨 我的思路大体如下 1.定义3个变量a,b,c并输入 int a,b,c; cin>>a>>b> ...

  2. Python标准库之shelve模块(序列化与反序列化)

    shelve模块是一个简单的key,value将内存数据通过文件持久化的模块,可以持久化任何picklel可支持的Python数据格式. 序列化 序列化源代码: import shelve impor ...

  3. 算法竞赛入门经典第二版 蛇形填数 P40

    #include<bits/stdc++.h> using namespace std; #define maxn 20 int a[maxn][maxn]; int main(){ ; ...

  4. React的组件化

    所谓组件,即封装起来的具有独立功能的UI部件.React推荐以组件的方式去重新思考UI构成,将UI上每一个功能相对独立的模块定义成组件,然后将小的组件通过组合或者嵌套的方式构成大的组件,最终完成整体U ...

  5. [CF]Round 516

    A Make a triangle! 题意:给定三根线段,问最少要延长多少才能拼成一个三角形. 数学题. B Equations of Mathematical Magic 题意:求$a - (a \ ...

  6. python之路xml模块补充

    创建一个子节点一共有三个方式 创建一个子节点2.3

  7. HTML的链接标签

    网页的链接标签 文本超链接 图像超链接 格式:<a href="path" target="目标窗口位置" >链接文本或图像</a> 锚 ...

  8. LED Decorative Light Manufacturer Introduction: LED Metal Table Light

    Nowadays, when many people choose the desk light, they are worried that it will not be used for a lo ...

  9. 用js实现鼠标点击爱心特效

    效果如图以下是代码 <script> !function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s ...

  10. Excel 不同文件、sheet 关联引用（vlookup函数）

    有时候在excel办公中会遇到,两个sheet相同的一列数据,作为关联(就像数据库的表的外键),其中一个sheet想要获取另一个sheet的其他列数据,这样就用到了vlookup函数,下面演示一下: ...