欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用tp3.2和mbUploadify.js上传图片的代码,记录一下

程序员文章站 2022-04-14 18:21:27
HTML: CSS: JS: PHP: ......

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;" onchange = "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="点击上传图片" onclick="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" title="删除">✕</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:

<script src="__public__/js/mbuploadify.js"></script>
<script>
    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" title="删除">✕</a>' +
                    '</span>';
        }
    });
    $('body').on('click','.remove-uploadimg',function(){
        $(this).parents('.uploadimg').remove();
    })
</script>

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()]);
}