基于think3.2,webuploader的七牛直接多图上传的思路。

来源：互联网发布：python编程入门经典编辑：程序博客网时间：2024/06/04 19:26

分享一个基于webuploader的七牛多图上传的JS。

七牛要求的token与key我最后写。（PHP的，其他语言的自行翻文档）

话不多说，直接贴代码：articel.js

/** * Created by Administrator on 2016/3/7. */$(function () {    // 初始化Web Uploader    var uploader = WebUploader.create({        // 选完文件后，是否自动上传。        auto: true,        // swf文件路径        swf: "/Public/Extend/webuploader/Uploader.swf",        // 文件接收服务端。(直接使用七牛)        server: "http://up.qiniu.com",//$("#hidUrl").val(),        // 选择文件的按钮。可选。        // 内部根据当前运行是创建，可能是input元素，也可能是flash.        pick: {            id:"#content_img",            lable:"<input type='button' class='btn' />",            multiple:true        },        // 只允许选择图片文件。        accept: {            title: 'Images',            extensions: 'gif,jpg,jpeg,bmp,png',            mimeTypes: 'image/*'        }    });    uploader.on( 'uploadSuccess', function(file,response  ) {        //var id=$("#hidBtn").val();        if(response.key){            //alert(1);            $("input[name='bg_img']").val($("#hidUrl").val()+"/"+response.key);            var a_tag="<a title='点击查看' target='_blank' href='"+$("#hidUrl").val()+"/"+response.key+"'>上传成功</a>";            $("#tips").html(a_tag);            console.log($("#hidUrl").val()+"/"+response.key);            console.log("-");        }        //重置uploader，开启此选项后        //uploader.reset();    });    //生成多个token,file,此函数在多文件上传的时候只会被调用一次    uploader.on('filesQueued',function(files ){        var number=files.length;        //不异步        $.ajaxSetup({            async : false        });        $.get(            "/index.php?m=admin&c=Public&a=getTokens",            {number:number},            function(data){                //console.log("data:"+data);                CreateTokenList(data);            }        )    });    //创建tokenlist    function CreateTokenList(data){        $("#TokenList").remove();        var str="<div id='TokenList' style='display:none'><ul>";        $.each(data, function (k,v) {            str+="<li token='"+ v['token_'+k]+"' key='"+ v['key_'+k]+"'>"+k+"</li>";        })        str+="</ul></div>";        $("body").append(str);    }    ////图片上传的时候    //uploader.on('fileQueued',function(file){    //    console.log(file);    //});    //单个上传的时候判断。去动态的变更formatData    uploader.on('uploadStart',function(files ){        //生成多个token,file        //console.log("k:"+files);        var data=$("#TokenList").find("ul>li");        var token="";        var key="";        $.each(data, function (k,v) {            if(!$(v).attr("is_use")){                token=$(v).attr('token');                key=$(v).attr('key');                $(v).attr('is_use',1);                return false;            }        });        uploader.options.formData.token = token;        uploader.options.formData.key = key;    });    //上传进度    uploader.on( 'uploadProgress', function( file, percentage ) {        //console.log("进度:"+percentage);        $("#tips").text("上传进度:"+percentage*100+"%");    });})

前端部分：

 <!--外部的图片转换为webuploader上传-->    <link rel="stylesheet" href="{$b_static}Extend/webuploader/webuploader.css"/>    <!--不含日志的。减少不必要的请求-->    <script src="{$b_static}Extend/webuploader/webuploader.min.js"></script>    <!--JS-->    <script src="{$b_static}js/admin/article.js"></script>                            <div class="control-group">                                <label class="control-label">背景图片</label>                                <div class="controls">                                    <p id="tips">此处图片上传为下面的图片上传，允许多图上传</p>                                    <span id="content_img">选择图片</span>                                    <input type="hidden" name="content_img" />                                </div>                            </div>

两个link就不解释了。一个是webuploader的样式文件，一个是js文件。
php，print_r的值：

Array(    [0] => Array        (            [token_0] => h6NVJgW4C-WLJlyhdyu_fsOBQa9dF5NZvaa35g2f:Vw4mq0PYTRSUdnBH-HOlydIqHWI=:eyJzY29wZSI6ImFydGljbGU6YXJ0aWNsZV81NmRlN2Q4YmRhOGUxNDQ0MDkxXzAiLCJkZWFkbGluZSI6MTQ1NzQyNTMwN30=            [key_0] => article_56de7d8bda8e1444091_0        )    [1] => Array        (            [token_1] => h6NVJgW4C-WLJlyhdyu_fsOBQa9dF5NZvaa35g2f:2FXSS8JkojeeVDbgOJF-wTrEJG0=:eyJzY29wZSI6ImFydGljbGU6YXJ0aWNsZV81NmRlN2Q4YmRhOGUxNDQ0MDkxXzEiLCJkZWFkbGluZSI6MTQ1NzQyNTMwN30=            [key_1] => article_56de7d8bda8e1444091_1        ))

多维数组，结构是key值与里面的token_ key_ 后面的相同。这个是个人生成token 与key的习惯。自行修改就好。

说一下思路，
uploader对象的创建是根据文档里面，之前搞的上传的方式是先传到服务器，然后服务器再去传七牛。那样还得费服务器的带宽，比较浪费，就换了一种方式。直接传七牛。
所以 server 那边也就换成了：”http://up.qiniu.com”
另外多图上传的时候需要在pick里面设置multiple 设置为true。开启多图上传。

filesQueued 这个事件是针对多图上传的事件。

var number=files.length;

是为了获取上传文件的数量。因为你在那个页面，不知道要上传多少文件。所以当你选中后，获取文件数量，根据数量去后台同步的把token与key 请求回来。
这里说下，为什么要同步，而不是异步呢，因为如果异步的话，他可能在你回调回来之前就去做上传动作了，导致上传失败。所以这边是要设置同步的。
CreateTokenList 这个函数为的是将返回过来的token与key 存起来。

最后在 uploadStart 事件的时候，摘出其中一个token与key。去设置到上传参数formData中去。uploadStart 是一个文件执行一次，所以纵然是多图上传，也是一个个的传上去。

下面两个事件：uploadProgress 就是获取进度了。是单个文件的进度，想做特效的，就具体可以根据你文件上传进度和现在的文件数量。具体做特效了，如果想看效果，建议用360之类的，设置一下你浏览器的上传速度，就可以看到效果了。
And….
图片上传成功后：
uploadSuccess也就是这个事件的时候。
确保你的response里面的响应带回了Key值。这样你的图片就算是上传成功了。
使用你七牛上传对应空间的域名 ，注意理解这句话，后面跟上你的responese.key 就是你上传图片的链接了。
比如：article空间七牛给你的对应域名是： dasd.111.com ，返回的responese.key 的值是 abc
那么你的图片访问路径便是： dasd.111.com/abc

我是分割线：

$data=$this->mkQiniuToken(C('Qiniu.article_bucket'),'article_',2);    /**     * @param $bucket.七牛存储空间     * @param $prefix.生成的文件前缀     * @param int $more。是否生成多个。此处填写生成的数量，多个的前缀取配置     * return 返回生成的 token 和key     */    public function mkQiniuToken($bucket,$prefix,$more=''){        import("Org.Util.Auth");        $auth=new Auth(C('Qiniu.AK'), C('Qiniu.SK'));        $title=$prefix;        $file_key=$title.uniqid().rand(111111, 999999);//        $file_key=$title.uniqid().rand(111111, 999999);;        if($more>1){            $arr=array();            for($i=0;$i<$more;$i++){                $token = $auth->uploadToken($bucket,$file_key."_".$i);                $arr[$i]['token_'.$i]=$token;                $arr[$i]['key_'.$i]=$file_key."_".$i;            }            //返回多维token与key            return $arr;        }        else{            //单一的token 与KEY            $token = $auth->uploadToken($bucket,$file_key);            return array('token'=>$token,'file_key'=>$file_key);        }    }

mkQiniuToken 这个函数是我自己封装的生成七牛token的函数，当然里面核心的也是根据七牛给php提供的案例去写的。此函数基于think3.2 . 用think的朋友可以拿去试试，注意自己AK与SK的秘钥别写错。另外，调用函数的时候别忘了use Qiniu\Auth; 里面的各种import。

最后，要说的是，其实你生成token 与key.就成功一半了。

1 0