Bootstrap多图片上传并预览(tp5)

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>

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
若依(Jui)是基于Bootstrap框架的前端UI库,而Bootstrap-table是一个用于显示数据表格的插件。如果想要在Bootstrap-table中实现多张图片预览,你可以使用插件如Bootstrap-fileinput或图片懒加载(lazy loading)技术结合。 以下是基本步骤: 1. 首先,引入Bootstrap-table和所需的图片预览插件库,比如Bootstrap-fileinput: ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-fileinput/5.3.1/css/fileinput.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap-fileinput@5.3.1/dist/js/fileinput.min.js"></script> ``` 2. 在HTML结构中,为每个图片字段添加`data-file-input`属性来启用预览功能: ```html <table id="myTable" data-pagination="true" data-height="400"> <thead> <!-- ... --> </thead> <tbody> <tr> <td data-field="image" data-events="fileupload" data-url="api/upload-image">上传图片</td> <!-- 使用插件提供的控件,如:<input type="hidden" name="file" value=""> --> </tr> <!-- ... --> </tbody> </table> ``` 3. 使用Bootstrap-fileinput的JavaScript初始化表格和图片预览: ```javascript $('#myTable').bootstrapTable({ // ...其他配置 events: { 'click .fileinput': function(e, val) { $(this).fileinput('upload'); }, 'fileupload.bs.fileinput': function(e, file, previewId, index) { // 图片上传成功后,替换隐藏域的值并更新显示 $('#myTable').find('[data-field=image]').val(file.url); } } }); ``` 4. 为了实现图片预览,你可能还需要编写一个服务器端处理程序(例如API),返回文件的缩略图或者链接,然后在前端展示图片
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值