Bootstrap多图上传版本1.0
(1)异步上传文件并保存到数据库
(2)限制文件上传个数
(3)监听文件是否上传成功
一、控制器
//多图上传 public function imgupload() { // 获取表单上传文件 $files = request()->file(); foreach($files as $file){ // 移动到框架应用根目录/public/uploads/ 目录下 $info = $file->rule('date')->move(ROOT_PATH . 'public' . DS . 'uploads'); $keyName = $file -> getInfo()['name']; if($info){ $db=db('case_images'); $filename = DS.'uploads'.DS.$info->getSaveName(); $data['images_name']=$keyName; $data['images_path']=$filename; $res=$db->insertGetId($data); $filedata=['id'=>$res,'keyn'=>$data['images_name'],'paths'=>$filename]; echo json_encode($data); }else{ // 上传失败获取错误信息 echo $file->getError(); } } }
二、视图
1、引入js、css文件
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="__STATIC__/file/css/default.css"> <link href="__STATIC__/file/css/fileinput.css" media="all" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="__STATIC__/file/js/fileinput.js" type="text/javascript"></script> <script src="__STATIC__/file/js/fileinput_locale_zh.js" type="text/javascript"></script> <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
2、加入到body代码
<div class="form-group"> <label class="col-sm-2 control-label">上传图片</label> <div id="formimageshow" class="formControls col-xs-10 col-sm-10"> <button id="buttonShow" type="button" class="btn btn-success" οnclick="upliadfileshow();return false;">上传图片</button><br/><br/> <label for="checkbox-1">最多支持20张轮播图</label> <div class="formControls col-xs-8 col-sm-8"> <input id="file-0" type="file" multiple class="file"> </div> </div> </div>
3、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']); console.log(data.response['paths']); }); </script>