TP5适用bootstrap多图上传插件

bootstrap多图上传插件很多人在tp3.2都用过，但是tp5的用法又有些不同。

使用步骤：

1、 首先要把页面调出来

按照官方demo给出那么多样式，我们根据需要选中其中一个就好

页面怎么调到自己的项中，这里拿tp5来说，找到相应的视图文件，（需要点bootstrap的基础），注意bootstrap的CSS和JS文件的引入

<link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/css/default.css">
<link href="/static/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
<script src="/static/js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="/static/js/fileinput.js" type="text/javascript"></script>
<script src="/static/js/locales/zh.js" type="text/javascript"></script>
<script src="/static/js/bootstrap.min.js" type="text/javascript"></script>

添加

<form enctype="multipart/form-data">
    <div class="form-group">
        <input id="file-0" type="file" multiple class="file">
    </div>
</form>

这里的

id="file-0"就是用的id="file-0"的这个样式，也就是下图

写入JS

<script>
    $(document).ready(function() {
        $("#test-upload").fileinput({
            "showPreview" : false,
            "allowedFileExtensions" : ["jpg", "png","gif"],
            "elErrorContainer": "#errorBlock"
        });
        /*
         $("#test-upload").on("fileloaded", function(event, file, previewId, index) {
         alert("i = " + index + ", id = " + previewId + ", file = " + file.name);
         });
         */
    });
    var id=2;
    //图片上传
    initFileInput("file-0","{:URL("imgupload")}");
    //初始化fileinput控件（第一次初始化）
    function initFileInput(ctrlName,uploadUrl){
        var control=$("#"+ctrlName);
        control.fileinput({
            language:"zh",//设置语言
            uploadUrl:uploadUrl,//上传地址
            allowedFileExtendsions:["jpg","png","gif","jpeg"],//接收的文件后缀
            showUpload:true,//是否显示上传按钮
            showCaption:true,//是否显示标题
            showPreview:true,//是否显示预览图，默认true
            showRemove:true,//是否显示删除/清空按钮，默认true。
            browseClass:"btn btn-primary",//按钮样式
            previewFileIcon:"<i class="glyphicon glyphicon-king"></i>",
            maxFileCount:10,//允许同时上传的最大文件数
            dropZoneEnabled:true,//是否显示拖拽区域

            initialPreviewConfig:{
                caption:ctrlName,
                width:"120px",
                url:uploadUrl,
                key:101,
                success:function(){



                }
            }



        });

    }
    //监听事件
    $("#file-0").on("fileuploaded",function(event,data,previewId,index){
        console.log(data.response["id"]);

    });

</script>

在JS里写配置：

页面就变成中文啦

2、控制器

//多图上传
    public function imgupload()
    {
        // 获取表单上传文件
        $files = request()->file();
        foreach($files as $file){
            // 移动到框架应用根目录/public/uploads/ 目录下
            $info = $file->rule("date")->move(ROOT_PATH . "public" . DS . "upImg");
            $keyName = $file -> getInfo()["name"];
            if($info){
                $db=Db::name("excel_img");
                $filename = "/"."upImg/".$info->getSaveName();
                $data["keyno"]=$keyName;
                $data["path"]=$filename;
                $res=$db->insert($data);
                $filedata=["id"=>$res,"keyn"=>$data["keyno"],"paths"=>$data["path"]];
                echo json_encode($filedata);
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
        }
    }

好了，自己拿去研究一下，搞不定可以给我留言