bootstrap fileinput文件上传

插件文件下载 https://github.com/kartik-v/bootstrap-fileinput/

html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>bootstrap文件上传插件title>

    <link href="../../../../resources/css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="../../../../resources/css/fileinput.min.css" media="all" rel="stylesheet" type="text/css"/>
    <link href="../../../../resources/css/theme.css" rel="stylesheet"/>
    <link href="../../../../resources/css/bs4.pop.css" rel="stylesheet"/>
head>
<body>
<div style="width: 100%;height: 700px;">

    <input type="file" name="file_upload" id="file_upload" multiple class="file-loading" />
div>

<script src="/jquery-1.11.3.min.js">script>
<script src="/bootstrap/js/bootstrap.min.js">script>

<script src="/fileinput.js">script>

<script src="/zh.js">script>
<script src="/theme.js">script>
<script src="/bs4.pop.js" type="text/javascript">script>
<script>
    var fileUpload = $('#file_upload');
    $(function () {
        //初始化上传控件的样式
        fileUpload.fileinput({
            language: 'zh',//设置语言
            theme: 'fas', //主题设置
            uploadUrl: '/upload/uploadFile', //上传的地址
            uploadAsync: false, //默认异步上传
            allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'], //设置上传的文件类型；文件后缀
            maxFileCount: 10, //每次上传允许的最大文件数。如果设置为0，则表示允许的文件数是无限制的。默认为0
            //minFileCount: 0, //每次上传允许的最少文件数。如果设置为0，则表示文件数是可选的。默认为0
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！", //超过最大文件数量提示信息
            uploadExtraData: function () { //向服务器方法发送附加数据。
                //后台通过 MultipartHttpServletRequest multipartRequest 接收
                // String id = multipartRequest.getParameter("id");
                // String name = multipartRequest.getParameter("name");

// Map fileMap = multipartRequest.getFileMap();

                return {"id": "附加数据1", "name": "附加数据2"};
            },
            showUpload: false, //是否显示上传按钮默认true
            showRemove: false, //显示整体删除的按钮默认true
            showCaption: false,//是否显示标题默认为true
            showPreview: false, //是否显示预览默认true        //四个都设置成false，则只显示一个‘选择’按钮

//文件选择器/浏览按钮的CSS类。默认为btn btn-primary   加了一个btn-mini 使‘选择’按钮变的小点
            browseClass: "btn btn-mini btn-primary",
            autoOrientImage: false,
            previewFileIcon: "",//当检测到用于预览的不可读文件类型时，
            // 将在每个预览文件缩略图中显示的图标。默认为
            overwriteInitial: false,
            initialPreviewAsData: true,

            // enctype: 'multipart/form-data',
            dropZoneEnabled: false,//是否显示拖拽区域默认是true
            // dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传', //显示拖拽区域时，显示的文字
            //minImageWidth: 50, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            //maxFileSize: 0, //单位为kb，如果为0表示不限制文件大小
            // showCancel:true,   //是否显示文件上传取消按钮。默认为true。只有在AJAX上传过程中，才会启用和显示
            // layoutTemplates:{
            //     actionUpload:'',//去除上传预览缩略图中的上传图片
            //     actionZoom:'',   //去除上传预览缩略图中的查看详情预览的缩略图标
            //     actionDownload:'', //去除上传预览缩略图中的下载图标
            //     actionDelete:'' //去除上传预览的缩略图中的删除图标
            // }//对象用于渲染布局的每个部分的模板配置。您可以设置以下模板来控制窗口小部件布局.eg:去除上传图标
        }).on("filebatchselected", function (event, files) { //点击上传按钮时或者选择上传的文件之后
            var count = fileUpload.fileinput('getFilesCount'); //获取上传文件的数量
            if (count > 0) {
                // 进行文件上传
                fileUpload.fileinput("upload");
            } else {
                alert("请选择要上传的文件");
            }
        }).on('filebatchuploadsuccess', function (event, data) { //上传后返回的响应
            let obj = data.response; // 获取后台服务器传的数据
            console.info(obj);
        });
    });
script>
body>
html>

【引用链接：https://www.jianshu.com/p/6d078b03ef8e

在使用 bootstrap fileinput.js时，需要限制上传文件的类型。发现有两个属性 allowedFileExtensions， allowedFileTypes。

allowedFileExtensions ：限制文件的后缀名

allowedFileTypes：限制文件的类型，两者所需的参数有所区别。

如：

allowedFileExtensions: ['jpg','png','bmp','jpeg'],

allowedFileTypes: ['image'],

如果同时初始化 allowedFileExtensions，allowedFileTypes，则 allowedFileExtensions的配置无效。

可根据需要初始化 allowedFileExtensions，allowedFileTypes二者之一即可，在使用 allowedFileTypes后，allowedFileExtensions将无效。

】

API链接参考：https://segmentfault.com/a/1190000018477200

案例

插件文件下载https://github.com/kartik-v/bootstrap-fileinput/

// Map fileMap = multipartRequest.getFileMap();

bootstrap fileinput文件上传

插件文件下载 https://github.com/kartik-v/bootstrap-fileinput/

案例

相关

在虚拟机(centos)上安装或卸载nodejs

js 正则匹配两个字符串之间，某个字符串之前（之后）的内容

sql server2016里面的json功能 - 转

cefSharp通过js操控页面，含跨域操控

angularjs $emit $on $broadcast 父子兄弟之间传值

渡一 3-2 js基础知识

js 校验身份证号码

nodejs 一个简单的web服务器，用于前端自己快速测试部署

11-15.JS轮播、专辑、放大镜

JS值传递与引用传递

[转]Vue-cli3.x引入本地json报404 解决方案

extjs ajax 同步及 confirm 确认提示框问题

标签