Laravel 中 bootstrap fileinput 图

1、 图片上传并预览

        $("#uploadfile").fileinput({
            language: 'zh', //设置语言
            uploadUrl:"/admin/goods/postUploadImage", //上传的地址
            allowedFileExtensions: ['jpg', 'gif', 'png','jpeg'],//接收的文件后缀
            //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
            uploadAsync: false, //默认异步上传
            showUpload:true, //是否显示上传按钮
            showRemove :false, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:false,//是否显示标题
            browseClass:"btn btn-primary", //按钮样式
            dropZoneEnabled: false,//是否显示拖拽区域
            minImageWidth: 50, //图片的最小宽度
            minImageHeight: 50,//图片的最小高度
            //maxImageWidth: 1000,//图片的最大宽度
            //maxImageHeight: 1000,//图片的最大高度
            maxFileSize:0,//单位为kb，如果为0表示不限制文件大小
            //minFileCount: 0,
            maxFileCount:5, //表示允许同时上传的最大文件个数
            enctype:'multipart/form-data',
            validateInitialCount:true,
            previewFileIcon: "<iclass='glyphicon glyphicon-king'></i>",
            msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
            fileActionSettings:{
                showRemove: true, //移除
                showUpload: false, //上传
                showZoom: true, //放大
                showDrag: true,
            },
            uploadExtraData:{}, //额外参数设置
        }).on('filebatchuploadsuccess', function(event, data, previewId, index) {
            if (data.response.code != 200){
                layer.alert(data.response.msg)
                return false;
            }
            $("#attach_id").val(data.response.data); //赋值已上传的文件ID到隐藏input中
        })

注意： filebatchuploadsuccess 是图片批量上传成功之后的回调方法

效果展示：

333333333333.jpg

2 图片上传成功之后的预览

    $("#preview").fileinput({
           //图片预览路径，json格式
            initialPreview:[
                "    ",
                "   "
            ],
            initialPreviewConfig:[
                {
                    "url": "   ",
                    "key": 12,
                    "extra": {
                        "attach_id": 12,
                        "goods_id": "4"
                    }}, 
                {
                    "url": "   ",
                    "key": 13,
                    "extra": {
                        "attach_id": 13,
                        "goods_id": "4"
                    }}
            ],
            initialPreviewAsData:true,
            language: 'zh', //设置语言
            uploadAsync: false, //默认异步上传
            showUpload:false, //是否显示上传按钮
            showRemove :false, //显示移除按钮
            showPreview :true, //是否显示预览
            showCaption:false,//是否显示标题
            showBrowse:false, //是否显示浏览按钮
            showClose:false,//是否显示关闭按钮
            dropZoneEnabled:false,

    })

    注意：
       1.    initialPreview 为所需预览图片的路径
       2.    initialPreviewConfig  为图片预览的参数配置信息， 
              url 表示点击缩略图时 删除 按钮 ，
               extra 为 删除时所需传递的参数，

图片上传之后编辑预览效果展示：

image.png

3 图片预览之删除原图片

    注意：需修改 fileinput.js 文件中第2739行的判断，根据后台返回的json进行修改，如下所示：
    
    //缩略图删除按钮回调事件
    if (data.code != 200){
        params.jqXHR = jqXHR;
        params.response = data;
        self._showError(data.msg, params, 'filedeleteerror');
        $frame.removeClass('file-uploading');
        $el.removeClass('disabled ' + origClass).addClass(errClass);
        resetProgress();
        return false;
    }
    
    ps：data.msg 为后台返回的json 消息，data.code 为后台返回的状态码

    注意：如果不修改该js文件中的代码，就会出现 如果你图片没有成功删除，
     但是它还是会把图片隐藏，得再次刷新才行
    

删除成功展示：

image.png

4 laravel中 csrf 验证问题

    ps:在fileinput.js 文件中第2789行ajax请求那儿添加以下代码：
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    },

5 fileinput文档链接

https://blog.csdn.net/u012526194/article/details/69937741

后台代码就不贴了，基本都大同小异