Home >Backend Development >PHP Tutorial >Code example for uploading images using tp3.2 and mbUploadify.js

Code example for uploading images using tp3.2 and mbUploadify.js

little bottleforward: 2019-04-22 15:35:351707browse

This article mainly talks about using tp3.2 and mbUploadify.js to upload pictures. It has certain reference value. I would like to share it with you. Friends who are interested can learn about it!

HTML:

<p class="form-group">
    <label class="col-sm-1 control-label no-padding-right" for="form-field-4"> 图片： </label>
    <p 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()">
        <p class="space-4"></p>
        <p id="img-data" class="img-data">
            <if condition="$data[&#39;savepath&#39;] neq &#39;&#39;">
                <span class="uploadimg">
                    <img src="{$data[&#39;savepath&#39;]}" style="max-width: 300px;">
                    <input type="hidden" name="img" value="{$data[&#39;img&#39;]}">
                    <a class="remove-uploadimg" title="删除">✕</a>
                </span>
            </if>
        </p>
        <p class="space-4"></p>
        <p id="imgError" class="msg"></p>
    </p></p>

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

PHP:

public function mbUploadImg(){    $upload = new Upload(); // 实例化上传类
    $upload->maxSize = 5242880 ; // 设置附件上传大小
    $upload->exts = array(&#39;jpg&#39;, &#39;gif&#39;, &#39;png&#39;, &#39;jpeg&#39;); // 设置附件上传类型
    $upload->rootPath =  &#39;./Public/&#39;;    // 上传文件
    $info = $upload->uploadOne($_FILES[&#39;files&#39;]);    if($info) {        // 上传成功
        $data[&#39;name&#39;] = $info[&#39;name&#39;];        $data[&#39;ext&#39;] = $info[&#39;ext&#39;];        $data[&#39;type&#39;] = $info[&#39;type&#39;];        $data[&#39;savename&#39;] = $info[&#39;savename&#39;];        $data[&#39;savepath&#39;] = "/Public/".$info[&#39;savepath&#39;].$info[&#39;savename&#39;];        $imgId = M(&#39;upload_img&#39;)->add($data);        if($imgId){            $resData[&#39;code&#39;] = 200;            $resData[&#39;msg&#39;] = &#39;成功&#39;;            $resData[&#39;id&#39;] = $imgId;            $resData[&#39;name&#39;] = $data[&#39;name&#39;];            $resData[&#39;savepath&#39;] = $data[&#39;savepath&#39;];            echo json_encode($resData);            return;
        }
    }    // 上传错误提示错误信息
    return $this->ajaxReturn([&#39;code&#39;=>400,&#39;msg&#39;=>$upload->getError()]);
}

Code example for uploading images using tp3.2 and mbUploadify.js

Related articles