tp3.2和mbUploadify.js上傳圖片實例

這篇文章主要為大家詳細介紹了tp3.2和mbUploadify.js上傳圖片的方法，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下。

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

關于tp3.2和mbUploadify.js上傳圖片的方法就分享到這里了，當然并不止以上和大家分析的辦法，不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值，可以學以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。