bootstrap-fileinput插件的文件上传(部分未实现)

时间 2021-07-12 标签 bootstrap-fileinput 文件上传

# fileinput插件可以快速实现对页面中多个文件上传的功能,样式也不错

>[info] 先上个图

[蓝奏云下载地址(关于fileinput的js,css和中文js和bootstrap的js,css)](https://www.lanzous.com/i2kptcd)

>[info] 附 [插件API说明](https://blog.csdn.net/u012526194/article/details/69937741/)

- 引入js和css

不要将下载的bootstrap中的js和css复制出来 css中对于图标和字体定义的是相对路径拿出来就破坏了他定义的目录结构(主要还是懒,改都不想改)

然后复制一下下面的代码就ok了

```html

<body>

<input class="file-loading" id="input-711" multiple name="kartik-input-711[]" type="file">
</body>
<script>
    $(function () {

        $("#input-711").fileinput({
            language: 'zh', //设置语言
            uploadUrl: "http://127.0.0.1/testDemo/fileupload/upload.do", //上传的地址
            browseOnZoneClick: true,//点击虚线框内(上传区)上传(非点击上传按钮上传)
            allowedFileExtensions: ['jpg', 'png', 'pdf'],//接收的文件后缀
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            uploadAsync: true, //默认异步上传
            showUpload: true, //是否显示上传按钮
            showRemove: true, //显示移除按钮
            showPreview: true, //是否显示预览
            showCaption: true,//是否显示标题
            browseClass: "btn btn-primary", //按钮样式    
            dropZoneEnabled: true,//是否显示拖拽区域
            previewSettings: {
                // image: {width: "auto", height: "200px"},
                pdf:{width:"auto",height:"160px"}
            },
            // minImageWidth: 70, //图片的最小宽度
            //minImageHeight: 50,//图片的最小高度

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

            // maxImageHeight: 100,//图片的最大高度
            //maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount: 10, //表示允许同时上传的最大文件个数

            enctype: 'multipart/form-data',

            validateInitialCount: true,

            previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            uploadLabel: "开始上传",
            removeLabel: "清除所有",
            browseLabel: "选择本地文件"
        }).on("fileuploaded", function (event, data, previewId, index) {
            console.info("执行!");
        });
    });


</script>

```