bootstrap-input的基本

使用

只是基本的使用示例，真正的上传功能还没做，因为我已经找了更好的一款替代品，记录一下，只是万一还要用就可以复制粘贴，其实下面已经足够在开发中使用了，所有选项组合我都是仔细考量过的

引入

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/fileinput.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/themes/explorer-fas/theme.css">


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/piexif.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/plugins/sortable.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/fileinput.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/js/locales/zh.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/themes/fas/theme.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/themes/explorer-fas/theme.js"></script>
           

html

<input id="file" name="file[]" type="file" multiple>
           

js

$('#file').fileinput({
            theme: 'fas',
            language: 'zh',
            uploadUrl: "<{url('/article/cover')}>",
            allowedFileExtensions: ['jpg', 'jpeg', 'png', 'gif'],

            minFileCount: 1,//不设置的话，验证不通过的文件也会上传
            maxFileCount: 5,

            initialPreviewAsData: true,

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

            uploadAsync: true,             //同异步上传 true:异步上传

            dropZoneEnabled: true,          //是否显示拖拽区域(是否支持拖拽上传)
            browseOnZoneClick: true,        //启用点击预览区域上传

            showPreview: true,              //是否预览(作用和上面差不多)
            showUpload: false,              //显示上传按钮
            showCaption: false,             //显示输入框
            showBrowse: false,              //显示文件选择按钮
            showRemove: false,              //显示移除按钮

            uploadExtraData: {
                aaa: 1111                    //上传时要传输的其他参数
            },

            removeFromPreviewOnError: true, //当选择的文件不符合规则时，例如不是指定后缀文件、大小超出配置等，选择的文件不会出现在预览框中，只会显示错误信息
            //预览设置
            previewSettings: {
                image: {width: "6rem", height: "6rem"}, //预览的图片宽高设置
            },

            hideThumbnailContent: false,    // true:隐藏上传缩略图图片
            msgProcessing: '文件选择中...',   //选择文件时文字提示文字


            dropZoneTitle: '可以将图片拖放到这里 …支持多文件上传',
            dropZoneClickTitle: "<div>或者点击上传图片</div>",

            layoutTemplates: {
                actionUpload: '',//去除上传预览缩略图中的上传图片
                actionZoom: '',   //去除上传预览缩略图中的查看详情预览的缩略图标
                actionDownload: '', //去除上传预览缩略图中的下载图标
                // actionDelete: true, //去除上传预览的缩略图中的删除图标

                // footer:'',//隐藏全部小图标；
                // actionUpload:'',//去除上传预览缩略图中的上传图片；
                // indicator:'', //去除上传状态图标(左侧➕)
                //actionDrag:'',//去除拖动图标(通常编辑的时候会显示这个图标)
                //actionDelete:'',//去除删除图标
                //其他 参考fileinput.js/fileinput.min.js中 搜索 layoutTemplates，可以看到模板内所有元素  需要改哪个，直接在这里赋空字符串就行了
            },


        }).on("filebatchselected", function (event, files) {

            $(this).fileinput("upload");


        }).on("fileuploaded", function (event, data) {
            if (data.response) {
                alert('处理成功');
            }
        });