HTML:

<div class=\"form-group\">
    <label class=\"col-sm-1 control-label no-padding-right\" for=\"form-field-4\"> 图片: </label>
    <div class=\"col-sm-9\">
        <input type=\"file\" name=\"files\" id=\"imgfile\" multiple style=\"display:none;\"   = \"imgpath.value=this.value\" >
        <input type=\"textfield\" id=\"imgpath\" style=\"border: 0px;outline:none;cursor: pointer;width:100px;display:none;\">
        <input type=\"button\" class=\"btn btn-white btn-info btn-sm\" value=\"点击上传图片\"  =\"imgfile.click()\">
        <div class=\"space-4\"></div>
        <div id=\"img-data\" class=\"img-data\">
            <if condition=\"$data[\'savepath\'] neq \'\'\">
                <span class=\"uploadimg\">
                    <img src=\"{$data[\'savepath\']}\" style=\"max-width: 300px;\">
                    <input type=\"hidden\" name=\"img\" value=\"{$data[\'img\']}\">
                    <a class=\"remove-uploadimg\"  =\"删除\"></a>
                </span>
            </if>
        </div>
        <div class=\"space-4\"></div>
        <div id=\"imgError\" class=\"msg\"></div>
    </div>
</div>

CSS:

<style>
    .remove-uploadimg{ cursor:pointer;}
    .uploadimg{
        display: inline-block;
        position: relative;
    }
    .uploadimg .remove-uploadimg{
        position: absolute;
        font-size: 20px;
        top:-10px;
        right: -6px;
    }
    .remove-uploadimg{
        width:30px;
        height:30px;
        background-color:#ccc;
        border-radius:50%;
        color:red;
        text-align:center;
    }
    .remove-uploadimg:hover{
        text-decoration: none;
    }
</style>

JS:

<  src=\"__PUBLIC__/js/mbUploadify.js\"></ >
< >
    var upload1 = new mbUploadify({
        file: document.getElementById(\'imgfile\'),
        /*ajax 上传地址*/
        url: \"{:U(\'Upload/mbUploadImg\')}\",
        //上传进度
        progress: function(){
            $(\'#imgpath\').show();
            $(\'#imgpath\').val(\'上传中...\');
        },
        /*上传失败*/
        error: function(file, msg){
            document.getElementById(\'imgError\').innerHTML = msg;
        },
        /*ajax上传成功*/
        uploadSuccess: function(res){
            $(\'#imgpath\').hide();
            $(\'#imgpath\').val(\'\');
            var data = JSON.parse(res);
            document.getElementById(\'img-data\').innerHTML = \'<span class=\"uploadimg\">\' +
                    \'<img src=\"\'+ data.savepath +\'\" style=\"max-width: 300px;\">\' +
                    \'<input type=\"hidden\" name=\"img\" value=\"\'+data.id+\'\">\'+
                    \'<a class=\"remove-uploadimg\"  =\"删除\">✕</a>\' +
                    \'</span>\';
        }
    });
    $(\'body\').on(\'click\',\'.remove-uploadimg\',function(){
        $(this).parents(\'.uploadimg\').remove();
    })
</ >

PHP:

public function mbUploadImg(){
    $upload = new Upload(); // 实例化上传类
    $upload->maxSize = 5242880 ; // 设置附件上传大小
    $upload->exts = array(\'jpg\', \'gif\', \'png\', \'jpeg\'); // 设置附件上传类型
    $upload->rootPath =  \'./Public/\';
    // 上传文件
    $info = $upload->uploadOne($_FILES[\'files\']);
    if($info) {
        // 上传成功
        $data[\'name\'] = $info[\'name\'];
        $data[\'ext\'] = $info[\'ext\'];
        $data[\'type\'] = $info[\'type\'];
        $data[\'savename\'] = $info[\'savename\'];
        $data[\'savepath\'] = \"/Public/\".$info[\'savepath\'].$info[\'savename\'];

        $imgId = M(\'upload_img\')->add($data);
        if($imgId){
            $resData[\'code\'] = 200;
            $resData[\'msg\'] = \'成功\';
            $resData[\'id\'] = $imgId;
            $resData[\'name\'] = $data[\'name\'];
            $resData[\'savepath\'] = $data[\'savepath\'];
            echo json_encode($resData);
            return;
        }
    }
    // 上传错误提示错误信息
    return $this->ajaxReturn([\'code\'=>400,\'msg\'=>$upload->getError()]);
}

 

收藏 打印