上传单张图片

1. 前端 视图代码

<!--其他-->
<?php $this->load->helper('render');?> <!--加载helper-->
<!--其他-->
<div class="page-container">
    <form class="form form-horizontal" id="validation_form" >
        <?=single_image_uploader('p_img', '250', '250', array('placeholder'=>'上传产品图片','datatype'=>'*','nullmsg'=>'请添加产品图片！'))?>
        <div class="row cl">
            <div class="col-xs-8 col-xs-offset-4 text-r">
                <a id="btn_save" class="btn btn-success radius"><i class="Hui-iconfont">&#xe632;</i> 保存</a>
            </div>
        </div> 
    </form> 
</div>
<!--其他-->

使用 single_image_uploader 生成HTML 查看

2. 前端 提交代码

<!--其他-->
<?=res_url('Validform/5.3.2/Validform.min.js', 'lib')?>
<script>

// 限制只能提交一次
var post_status = true;

function save_data(){
    if(post_status) {
        layer.msg('正在提交...',{time:0});

        var p_img = $('#p_img').val();
        var data = {
            'p_img': p_img
        };

        var url = '<?=site_url('uploadImgProc')?>';

        post_status = false;
        $.post(url,data,function(data){
            if(data.status){
              layer.confirm('保存成功', {btn: ['是']},function(index){
                  parent.layer.closeAll();
              });
            }else{
              layer.alert(data.msg);
            }
            post_status = true;
        },'json')
        .error(function(){ 
            post_status = true;
            layer.alert("提交失败！"); 
        });
    }
} 
$(document).ready(function() { 
    // /确认保存
    $('#validation_form').Validform({
        btnSubmit:'#btn_save'
        ,tiptype:function(msg,o){ 
            if(msg){
                layer.tips(msg,o.obj,{tips:[3,'#555']});                
            }
        }
        ,callback:function(data){
            save_data();
            return false;
        } 
    });

});
</script>
<!--其他-->

只要提交ID值就可以了。

3.后端 处理上传

public function addProc()
{
    $img = form('p_img');   //接受Base64图片数据

    //加载helper
    $this->load->helper('file');

    // 把图片上传到七牛
    $file_name = uploadQiniuBase64Img($img, 'test');

    // 用qiniu_img()函数显示图片
    echo '<img src="'.qiniu_img($file_name, 60, 50).'" alt="">';
    echo '<img src="'.qiniu_img($file_name, '', 70).'" alt="">';
    echo '<img src="'.qiniu_img($file_name, 50).'" alt="">';
    echo '<img src="'.$file_name.'" alt="">';
    exit();

    /** 删除七牛图片 **/
    //图片地址
    $img_url = 'http://oh0xc3p8t.bkt.clouddn.com/test/2016/12/13/584fe0c62ea91.png';
    //删除七牛服务器文件
    $result = removeQiniuFile($img_url);
}

操作图片的详细接口参照 Helper文档 [点击查看]