BootstrapFileInput 图片上传插件 详解

链接: https://pan.baidu.com/s/1X0XHUOdR2Ck-ZmWJqPdeiA 提取码: 4w3a

html:

<input id="input-repl-3a" name="videoFileAddress" type="file" accept="mp4,avi,dat,3gp,mov,rmvb" />

css引入：

<link href="/static/bootstrap-fileinput-4.4.8/css/fileinput.min.css" rel="stylesheet" />
<link href="/static/bootstrap-fileinput-4.4.8/css/fileinput-rtl.min.css" rel="stylesheet" />

js引入：

<script src="/static/bootstrap-fileinput-4.4.8/js/fileinput.min.js"></script>
<script src="/static/bootstrap-fileinput-4.4.8/js/zh.js"></script>

js：

<script th:inline="javascript">
　$("#input-repl-3a").fileinput({
        dropZoneTitle : "请上传小于150M的视频！",
        uploadUrl : "saveVideoAddress",
        language : "zh",
        autoReplace : true,
        showCaption : false,
        showUpload : true,
        overwriteInitial : true,
        showUploadedThumbs : true,
        //showPreview:false,                   //显示上传图片的大小信息
        maxFileCount : 1,
        minFileCount:1,
        maxFileSize : 153600,//文件最大153600kb=150M
        initialPreviewShowDelete : false,
        showRemove : false,//是否显示删除按钮
        showClose : false,
        layoutTemplates : {
            actionUpload:'',
        },
        allowedFileExtensions : [ "mp4","avi","dat","3gp","mov","rmvb"],
        previewSettings : {
            image : {
                width : "100%",
                height : "100%"
            },
        }
    }).on("fileuploaded", function(event, data) {
        var jk = data.response;
    });
</script>

php后端接收：

$file = request()->file('videoFileAddress'); // 获取上传的文件
// 上传至服务器，获取存储路径
// ...
// ...省略代码
// ...
$video = '/public/static/video/' . $info->getSaveName();
return show(200, "上传视频成功", $video);

1