上一篇介绍了通过七牛云的客户端直传功能上传文件，本篇介绍上传后回调功能，整个业务流程如图所示。

整个上传流程

1. 业务服务器颁发 上传凭证 给客户端

2. 客户端通过 上传凭证，直接将文件上传到七牛云

3. 七牛云发起回调

4. 业务服务器返回结果

5. 七牛云将业务服务器返回的结果返回给客户端

业务服务器上传凭证颁发见上一篇文章

设置回调

• callbackUrl：回调接口的地址，七牛云上传成功后，将通过post方式访问该地址，并将callbackBody中的参数传递给回调接口

• callbackBody：设置回调时七牛云要传递过来的参数，格式为"参数1=值&参数2=值..."

• 一旦设置了回调，returnBody就无效了，七牛云将回调接口返回的数据，直接返回给客户端。

• 回调接口返回的数据，必须为json格式

• 当接收到七牛的返回数据后，你可以根据你的业务进行一定的操作，比如保存七牛返回的结果到数据库，我没有这方面需求，仅仅为了测试功能

php后台核心代码（YII框架），颁发上传凭证token，设置回调接口和回调参数：

$accessKey = qn_accesskey;
$secretKey = qn_secretkey;
$auth = new Auth($accessKey, $secretKey);
// 要上传的空间
$bucket = qn_bucket;
$returnBody=[
    "key"=>"$(key)",
    "imageInfo"=>"$(imageInfo.width)",
    "bucket"=>"$(bucket)",
    "myname"=>"liyulin"
];
$policy=[
    'callbackUrl' => 'http://yourdomain.com/qiniu/callback',
    'callbackBody' => 'filename=$(key)&filesize=$(fsize)',
    'saveKey'=>"$(year)$(mon)$(day)$(hour)$(min)$(sec)$(fname)",
    'returnBody'=>json_encode($returnBody),

];
$token= $auth->uploadToken($bucket,null,3600,$policy);
$this->_data['token']=$token;

return $this->render('up',$this->_data);

回调接口核心代码：

$post=Yii::$app->request->post();
$ret['key']=$post['filename'];
$ret['size']=$post['filesize'];
$ret['message']="success";

return json_encode($ret);

用户端HTML核心代码：

<form  id="form1" >
    <input id="token" name="token" type="hidden" value="<?=$token?>">
    <input id="file" name="file" type="file" />
    <button id="submit" type="button">上传</button>
</form>

<div id="preview">
    <img src="">
</div>

用户端jquery核心代码：

var domain="http://yourqiniu.com/";
$("#submit").on('click',function(){

    var formdata=new FormData();
    formdata.append('token',$("#token").val());
    formdata.append('file',$("#file")[0].files[0]);
    $.ajax({
        type:'post',
        url:'http://up-z1.qiniu.com',
        data:formdata,
        cache: false,
        contentType:false,
        processData: false,
        dataType:"json",
        error: function(request) {
            alert(request.status);
        },
        success: function(data) {
            alert(data.key);
            $("#preview img").attr("src",domain+data.key);
        }

    });
});