dmz社区

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 1003|回复: 0

[功能实现] Bootstrap+PHP实现多图上传

[复制链接]
  • TA的每日心情

    2024-11-19 20:46
  • 签到天数: 244 天

    [LV.8]以坛为家I

    4434

    主题

    1459

    帖子

    1万

    积分

    会|员

    Rank: 9Rank: 9Rank: 9

    积分
    10734
    发表于 2020-2-29 02:16:05 | 显示全部楼层 |阅读模式

    本站资源全部免费,回复即可查看下载地址!

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x
    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231
    下面是根据下载的demo进行补充:
    使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异步或同步上传,下面是效果图:
    1149706-20180408162346787-392065749.png

    1149706-20180408161755447-1044161441.png

    前端代码:fileinput.html
    [HTML] 纯文本查看 复制代码
    <!DOCTYPE html>
    <!-- release v4.1.8, copyright 2014 - 2015 Kartik Visweswaran -->
    <html lang="en">
        <head>
            <meta charset="UTF-8"/>
            <title>bootstrap多图上传</title>
    
            <link href="/public/index/fileinput/css/bootstrap.min.css" rel="stylesheet">
            <link href="/public/index/fileinput/css/fileinput.css" media="all" rel="stylesheet" type="text/css" />
    
            <script src="/public/index/fileinput/js/jquery-2.0.3.min.js"></script>
            <script src="/public/index/fileinput/js/fileinput.js" type="text/javascript"></script>
            <script src="/public/index/fileinput/js/bootstrap.min.js" type="text/javascript"></script>
            <!-- 中文化 -->
            <script src="/public/index/fileinput/js/fileinput_locale_zh.js" type="text/javascript"></script>
    
        </head>
        <body>
            <div class="container kv-main">
                
                <br>
                <form enctype="multipart/form-data">
                    
                    <div class="form-group">
                        <!-- 初始化插件 -->
                        <input id="file-1" type="file" multiple class="file" data-overwrite-initial="false" data-min-file-count="2" name="images">
                    </div>
                    
                </form>
            </div>
        </body>
        <script>
    
        // 初始化filleinput控件  第一次初始化
        function initFileInput(ctrlName, uploadUrl){
            var control = $('#'+ctrlName);
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl:uploadUrl,    //上传的地址
                allowedFileExtensions:['jpg','png'],    //接收的文件后缀
                showUpload:true,    //是否显示上传按钮
                showCaption:false,    //是否显示标题
                maxFileSize: 1000,    //图片最大尺寸kb 为0不限制
                maxFilesNum: 3,        //最多上传图片
                overwriteInitial: false,//不覆盖已上传的图片
                browseClass: "btn btn-info", //按钮样式 
                dropZoneEnabled: true,//是否显示拖拽区域
                previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}!",
            });
        }
    
        //初始化fileinput控件,第一次初始化 (控件id,上传地址)
        initFileInput("file-1", "uploadImg");
    
       // 监听事件
        $("#file-1").on("fileuploaded", function (event, data, previewId, index) {
            // 上传地址
            console.log(data);
        });
        </script>
    </html>

    后台代码:
    [PHP] 纯文本查看 复制代码
    /*
        * bootst多图上传
        */
        public function fileinput()
        {
            
            return $this->fetch();
        }
    
        public function uploadImg()
        {
            // var_dump($_FILES);
            // 获取表单上传文件 
            $file = request()->file('images');
            // 移动到框架应用根目录/public/uploads/img 目录下
            $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads/img');
            
            if($info){
                // 成功上传后 获取上传信息
                $data['response'] = $info->getSaveName();
                return json($data);
                
                //图片上传成功,以下可对数据库操作
                // ......
                
            }else{
                // 上传失败获取错误信息
                echo $file->getError();
            }
            
        }


    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|Archiver|小黑屋|本站代理|dmz社区

    GMT+8, 2024-12-23 20:14 , Processed in 0.077806 second(s), 35 queries .

    Powered by Discuz! X3.4 Licensed

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表