webuploader 同一页面多图上传功能

最新推荐文章于 2022-07-28 15:50:52 发布

qq_31570703

最新推荐文章于 2022-07-28 15:50:52 发布

阅读量1k

点赞数

分类专栏： PHP

本文链接：https://blog.csdn.net/qq_31570703/article/details/80388913

版权

PHP 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用WebUploader库在同一个网页上实现多张图片的上传功能，包括后台处理代码和前端配置，帮助开发者创建高效稳定的图片上传解决方案。

摘要由CSDN通过智能技术生成

       <div class="com-upload-box" id="company-logo">
            <span class="comimgs" id="logo" data-src="<?php if(!empty($info['logo'])) echo $info['logo']?>"
                  data-name="" <?php if(!empty($info['logo'])) echo "style='background:url(".$info["logo"].") no-repeat; background-size: 6rem 6rem'";?>>
            </span>
            <div class="ca-up-img">上传企业logo</div>
        </div>
        <div class="com-upload-box" id='com-yyzz'style="border-bottom: 1px solid #eee;">
             <span class="comimgs" id="licenseimg" data-src="<?php if(!empty($info['licenseimg'])) echo $info['licenseimg']?>" data-name=""
            <?php if(!empty($info['licenseimg'])) echo "style='background:url(".$info["licenseimg"].") no-repeat; background-size: 6rem 6rem'";?>></span>
            <div class="ca-up-img">上传工商营业执照</div>
        </div>

   //初始化上传按钮
    var txt ='';
    var uploader = WebUploader.create({
        auto: true,
        swf: "/templates/theme/member/js/webuploader/Uploader.swf",
        server: '/attachment/attachment/uplogo.html',
        pick: {id:'.ca-up-img'},
        accept: {
            title: '上传照片',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/!*'
        },
        compress:{
            quality: 100,
        },
        fileSingleSizeLimit: 4 * 1024 * 1024
    });
    //选择的文件出错
    uploader.on('error',function (handler) {
        switch (handler){
            case 'F_EXCEED_SIZE':
                return showerr('图片太大了,不能超过4M');
                break;
            case 'Q_EXCEED_NUM_LIMIT':
                return showerr('最多只能上传1张图片！');
                break;
        }
    });
    //文件添加队列
    uploader.on( 'fileQueued', function( file ) {
        var id=file.source.ruid,$obj=$('#rt_'+id).prev('.webuploader-pick');
            txt = $obj.html();
            $obj.html('').append('<div class=prog >上传中…</div>');
    });
    //上传过程
    uploader.on('uploadProgress',function (file,percentage) {
        var id=file.source.ruid,$obj=$('#rt_'+id).prev('.webuploader-pick');
            $obj.html('').append('<div class=prog>'+parseInt(percentage * 100)+'%</div>');
    });
    //上传成功
    uploader.on('uploadSuccess',function (file,response) {
            uploader.removeFile(file);
        var id=file.source.ruid,$obj=$('#rt_'+id).prev('.webuploader-pick');
            $obj.html('').html(txt);
            if(response.status==1){
                $obj.parent('.ca-up-img').prev('.comimgs').css('background-image','url("'+response.pic+'")')
                $obj.parent('.ca-up-img').prev('.comimgs').attr({'data-src':response.pic,'data-name':response.msg});
            }else{
                return showerr(response.msg);
            }
    });

后台代码

    /**
     * 上传营业执照
     */
    public function licenseimg(){
        set_time_limit(0);
        $result=['status'=>0,'pic'=>'','msg'=>''];
        $path = "./uploadfile/photos/";
        $maxSize=1048576 * 10; //限制图片最大10M
        $img_type=array('gif','jpg','jpeg','bmp','png',);
        if(!is_writable($path)){
            $result['msg']='目录没有写权限！';
            goto _end;
        }
        if(!empty($_FILES)){
            $name = $_FILES['file']['name'];
            $size = $_FILES['file']['size'];
            $name_tmp = $_FILES['file']['tmp_name'];
            $type=explode('.',$name);
            if (empty($name)) {
                $result['msg']='您未选择图片！';
                goto _end;
            }
            if(!in_array($type[count($type)-1],$img_type)){
                $result['msg']='上传的图片类型不正确！';
                goto _end;
            }
            if($size>$maxSize){
                $result['msg']='上传的图片太大了！';
                goto _end;
            }
            $pic_name = time() . rand(1000000, 9999999) . ".jpg";
            $pic_url =$path . $pic_name;
            if (move_uploaded_file($name_tmp, $pic_url)) $result=['status'=>1,'pic'=>substr($pic_url,1),'msg'=>'上传成功！'];
            else $result=['status'=>0,'pic'=>'','msg'=>'上传失败，请重试！'];
        }
        _end:
        exit(json_encode($result));
    }