TP5适用bootstrap多图上传插件

来源：互联网发布：珍珠台光束灯编程编辑：程序博客网时间：2024/06/06 02:57

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();            }        }    }

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

0 0