七牛云上传图片

引入：

<script src="__PUBLIC__/plugins/qiniu/plupload/plupload.full.min.js"></script>
<script src="__PUBLIC__/plugins/qiniu/qiniu.js"></script>
<script src="__PUBLIC__/plugins/qiniu/newUi.js"></script>
html页面：

<tr>
    <th valign="top">图片信息：</th>
    <td><a href="javascript:;" class="filePicker"  id="filePicker2">上传图片</a><b>最多可上传6张图片，每张图片大小不超过5M，支持gif,jpg,png,jpeg格式文件</b>
        <div id='picBox2'></div>
    </td>
</tr>

使用：

var progress={};

var uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4',    //上传模式,依次退化
        browse_button: 'filePicker2',  //上传选择的点选按钮，**必需**
        uptoken_url: asd,         //Ajax请求upToken的Url，**强烈建议设置**（服务端提供）
        unique_names: true,               // 默认 false，key为文件名。若开启该选项，SDK为自动生成上传成功后的key（文件名）。
        domain: 'image.fengwang.com', //bucket 域名，下载资源时用到，**必需**
        get_new_uptoken: false,           //设置上传文件的时候是否每次都重新获取新的token
        container: 'picBox2',           //上传区域DOM ID，默认是browser_button的父元素，
        flash_swf_url: 'js/plupload/Moxie.swf',  //引入flash,相对路径
        max_retries: 3,                   //上传失败最大重试次数
        dragdrop: true,                   //开启可拖曳上传
        drop_element: 'picBox2',        //拖曳上传区域元素的ID，拖曳文件或文件夹后可触发上传
        chunk_size: '4mb',                //分块上传时，每片的体积
        auto_start: true,                 //选择文件后自动上传，若关闭需要自己绑定事件触发上传
        multi_selection: true,            //是否能多选
        filters : {
            max_file_size : '5mb',      //最大文件体积限制
            prevent_duplicates: false,     //防置重复
            mime_types: [
                {title : "Image files", extensions : "jpg,jpeg,png"}, //限定jpg,gif,png后缀上传
            ]
        },
        init: {
            'FilesAdded': function(up, files) {
                plupload.each(files, function(file){
                    var nativeFile = file.getNative();
                    var img = new Image();
                    img.src = URL.createObjectURL(nativeFile);
                    img.onload = function(){
                        var width = img.naturalWidth;
                        var height = img.naturalHeight;
//                                    if(width==840 && height==640){
//                                        uploader.start();
//                                    }else{
//                                        uploader.removeFile(file);
//                                        layer.msg("请上传840*640的图片");
//                                        $("#" + id).find(".progressContent").html("").show();
//                                    }
                    }
                });
            },
            'BeforeUpload': function(up, file) {
                // 每个文件上传前,处理相关的事情
                chunk_size_num = 0;
            },
            'UploadProgress': function(up, file) {
                // 每个文件上传时，处理相关的事情
                var params = {
                    "nameSwitch" : false,
                    "sizeSwitch" : false,
                    "cancelSwitch" : false,
                    "statusSwitch" : false,
                    "barSwitch" : true
                };
                var progress = new FileProgress(file, 'fsUploadProgress',params);
                var chunk_size = plupload.parseSize(this.getOption('chunk_size'));
                chunk_size_num ++;
                progress.setProgress(file.percent + "%", file.speed,chunk_size);
            },
            'FileUploaded': function(up, file, info) {
                var nativeFile = file.getNative();
                var img = new Image();
                var style = '100%';
                var matTop = 0;
                img.src = URL.createObjectURL(nativeFile);
                img.onload = function(){
                    var width = img.naturalWidth;
                    var height = img.naturalHeight;
                    if(width<height){
                        style = 'height:100%;';
                    }else if(width==height){
                        style = 'height:100%';
                    }else{
                        style = '100%';
                        var bl = width/90;
                        matTop = (90-height/bl)/2;
                        if(matTop<0){
                            matTop=0;
                        }
                    }
                    var WH = width.toString()+"px,"+height.toString()+"px";
                    progress.id=file.id;
                    progress.size=file.size;    //文件大小
                    progress.name=file.name;    //文件名
                    progress.type=file.type;    //文件类型
                    console.log()
                    progress.url="http://"+up.settings.domain+"/"+file.target_name;  //文件路径
                    var html = '';
                    html += '<div class="l lst1106" style="overflow: hidden;position: relative; 90px;height: 90px;margin-left: 10px;border: solid 1px #ddd;text-align: center;">';
                    html += '<span class="lst1106-SC" style="" data-name='+progress.id+' data-type='+progress.type+'></span>';
                    html += '<img data-lst="'+WH+'" style="margin-top:'+matTop+'px;'+style+'" src="'+progress.url+'" alt=""/>';
                    html += '</div>';
                    if($('#picBox2').children('div').length==7){
                        layer.msg('最多上传6张图片',{
                            time:1000
                        });
                    }else{
                        $('#picBox2').append(html);
                    }
                }

            },
            'Error': function(up, err, rrTip) {
                var tipStr = rrTip + "请重新上传！";
                layer.msg(tipStr);
            },
            'UploadComplete': function() {
                //队列文件处理完毕后,处理相关的事情
                $('#success').show();
            },
            'Key': function(up, file) {
                // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
                // 该配置必须要在 unique_names: false , save_key: false 时才生效
                var key = "";
                // do something with key here
                return key
            }
        }
    });