Codebeispiel zum Hochladen von Bildern mit tp3.2 und mbUploadify.js-PHP-Tutorial-php.cn

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

little bottle

Freigeben： 2023-04-06 08:40:01

nach vorne

1686 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!