使用tp3.2和mbUploadify.js上传图片的代码示例

内容导读

收集整理的这篇技术教程文章主要介绍了使用tp3.2和mbUploadify.js上传图片的代码示例，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3197字，纯文字阅读大概需要5分钟。

内容图文

本文主要讲述了使用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()]);}

相关教程：

PHP视频教程

HTML视频教程

CSS视频教程

js视频教程

以上就是使用tp3.2和mbUploadify.js上传图片的代码示例的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是为您收集整理的使用tp3.2和mbUploadify.js上传图片的代码示例全部内容，希望文章能够帮你解决使用tp3.2和mbUploadify.js上传图片的代码示例所遇到的程序开发问题。 如果觉得技术教程内容还不错，欢迎将网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。