Heim > Artikel > Backend-Entwicklung > Codebeispiel zum Hochladen von Bildern mit tp3.2 und mbUploadify.js

Codebeispiel zum Hochladen von Bildern mit tp3.2 und mbUploadify.js

little bottlenach vorne: 2019-04-22 15:35:351687Durchsuche

In diesem Artikel geht es hauptsächlich um die Verwendung von tp3.2 und mbUploadify.js zum Hochladen von Bildern. Ich möchte ihn gerne mit Ihnen teilen.

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

Verwandte Tutorials:

Das obige ist der detaillierte Inhalt vonCodebeispiel zum Hochladen von Bildern mit tp3.2 und mbUploadify.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php css html JS

Stellungnahme：

Dieser Artikel ist reproduziert unter:cnblogs.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：PHP-FPM ermöglicht eine langsame ProtokollierungsmethodeNächster Artikel：PHP-FPM ermöglicht eine langsame Protokollierungsmethode

In Verbindung stehende Artikel

Mehr sehen