Maison >développement back-end >tutoriel php >Exemple de code pour télécharger des images à l'aide de tp3.2 et mbUploadify.js

Exemple de code pour télécharger des images à l'aide de tp3.2 et mbUploadify.js

little bottleavant: 2019-04-22 15:35:351706parcourir

Cet article parle principalement de l'utilisation de tp3.2 et de mbUploadify.js pour télécharger des images. Il a une certaine valeur de référence. J'aimerais le partager avec vous. Les amis intéressés devraient le consulter !

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

Tutoriels associés :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

php css html JS

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：PHP-FPM permet une méthode de journalisation lenteArticle suivant：PHP-FPM permet une méthode de journalisation lente

Articles Liés

Voir plus