zoukankan      html  css  js  c++  java
  • 使用tp3.2和mbUploadify.js上传图片的代码,记录一下

    HTML:

    <div class="form-group">
        <label class="col-sm-1 control-label no-padding-right" for="form-field-4"> 图片: </label>
        <div 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;100px;display:none;">
            <input type="button" class="btn btn-white btn-info btn-sm" value="点击上传图片" onclick="imgfile.click()">
            <div class="space-4"></div>
            <div id="img-data" class="img-data">
                <if condition="$data['savepath'] neq ''">
                    <span class="uploadimg">
                        <img src="{$data['savepath']}" style="max- 300px;">
                        <input type="hidden" name="img" value="{$data['img']}">
                        <a class="remove-uploadimg" title="删除"></a>
                    </span>
                </if>
            </div>
            <div class="space-4"></div>
            <div id="imgError" class="msg"></div>
        </div>
    </div>

    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- 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()]);
    }
  • 相关阅读:
    【总结】设备树语法及常用API函数【转】
    【转】ios蓝牙开发学习笔记(四)ios蓝牙应用的后台处理 -- 不错
    SQL存储过程相关信息查看
    DBCC CHECKIDENT
    SQL CAST与CONVERT区别
    SQl查询数据库库名,表名、表的列名
    SQL语句资料
    SQL中rownum和order by的执行顺序的问题
    完整的ASP.NET存储过程分页,排序,鼠标移至变色
    最简单删除SQL Server中所有数据的方法(不用考虑表之间的约束条件,即主表与子表的关系)
  • 原文地址:https://www.cnblogs.com/mthp/p/10097746.html
Copyright © 2011-2022 走看看