前端js调用七牛制作评价页面案例

一、需求　　

　　公司所有的上传页面都用七牛，前端不免要直接调用七牛的代码进行上传，以下是一个实现七牛上传的案例，制作一个常见的商品评价页面，页面需求很常见当上传到第五章图片的时候，上传按钮消失，上传需要显示当前进度，上传完毕以后可以删除图片，如图1所示。

二、过程

　　七牛官网的比较多比较乱，直接给大家一个配置好可以用的，如需其他定制，只能自己去啃文档了，整个demo的js核心代码如下

var progress1;
var waikuang;
var img;
var span;
var flag = 0;                             // 判定当前是第几张图片

var uploader = Qiniu.uploader({
    runtimes: 'html5,flash,html4',      // 上传模式,依次退化
    browse_button: 'pickfiles',         // 上传选择的点选按钮，**必需**
    domain: '公司的七牛域名',
    get_new_uptoken: true,             // 设置上传文件的时候是否每次都重新获取新的 uptoken
    container: 'container',             // 上传区域 DOM ID，默认是 browser_button 的父元素，
    max_file_size: '2mb',             // 最大文件体积限制
    flash_swf_url: 'path/of/plupload/Moxie.swf',  //引入 flash,相对路径
    max_retries: 3,                     // 上传失败最大重试次数
    dragdrop: true,                     // 开启可拖曳上传
    drop_element: 'container',          // 拖曳上传区域元素的 ID，拖曳文件或文件夹后可触发上传
    chunk_size: '4mb',                  // 分块上传时，每块的体积
    auto_start: true,                   // 选择文件后自动上传，若关闭需要自己绑定事件触发上传,
    multi_selection: !(mOxie.Env.OS.toLowerCase() === "ios"),
    uptoken_func: function (file) {
        console.log(file)
        var ajax = new XMLHttpRequest();
        ajax.open('POST', 公司后台提供的七牛接口, false);
        ajax.send();//
        if (ajax.status === 200) {
            var res = JSON.parse(ajax.responseText);
            console.log('custom uptoken_func:' + res.uptoken);
            return res.uptoken;
        } else {
            console.log('custom uptoken_func err');
            return '';
        }
    },
    auto_start: true,
//            log_level : 5,//打印日至
    init: {
        'FilesAdded': function (up, files) {
            plupload.each(files, function (file) {

                // 文件添加进队列后,处理相关的事情
                waikuang = document.createElement("a");
                waikuang.className = "showPic";
                waikuang.id=file.name+"hmsg"

                img= document.createElement("img");
                span = document.createElement("span");
                span.className = "closePic";
                waikuang.appendChild(img);
                img.style.zIndex=10;
                waikuang.appendChild(span);
                progress1 = document.createElement("progress");
                progress1.max = 100;
                waikuang.appendChild(progress1);
                document.getElementById("container").appendChild(waikuang);

            });
        },
        'BeforeUpload': function (up, file) {
            // 每个文件上传前,处理相关的事情

        },
        'UploadProgress': function (up, file) {
            // 每个文件上传时,处理相关的事情
            progress1.value = file.percent;
            console.log(file.percent)
        },
        'FileUploaded': function (up, file, info) {
            // 每个文件上传成功后,处理相关的事情
            var res = JSON.parse(info);
            var sourceLink = "http://7xs8w3.com1.z0.glb.clouddn.com/" + res.key; //获取上传成功后的文件的Url
            img.src = sourceLink;
            span.id = res.key;
            waikuang.removeChild(progress1);
            window.sessionStorage.setItem(res.key,sourceLink);
            flag++;
            //监听删除
            var x = document.getElementById(span.id);
            x.onclick= function () {
                document.getElementById("container").removeChild(document.getElementById(res.key+"hmsg"));
                window.sessionStorage.removeItem(res.key);
                flag--;
                if(flag<5){
                    document.getElementById("pickfiles").style.display="inline-block";
                }
            }
        },
        'Error': function (up, err, errTip) {
            alert("上传出错，请稍后再尝试")
        },
        'UploadComplete': function () {
            //队列文件处理完毕后,处理相关的事情
            if(flag>=5){
                document.getElementById("pickfiles").style.display="none";
            }
        },
        'Key': function (up, file) {
            // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
            // 该配置必须要在 unique_names: false , save_key: false 时才生效
            var key = file.name;
            // 刷新token;
            return key
        }
    }
});

　　关键处已经有注释，前端需要做的是将公司独有的接口和七牛域名进行配置，在七牛上传插件初始化的时候有大概七个回调，分别代表着图片上传前后和图片上传中要处理的代码，我这个案例在图片上传以前要简历一个承载图片的div和一个关闭按钮，图片上传的时候要改变进度，图片上传以后判断当前图片数目如果够五张了，则隐藏上传框，删除图片以后如果不足五张则显示上传框，上传进度条要符合项目的主题色，所以要更改一下process标签的默认样式，这里以webkit内核给出模板，代码如下

html部分代码

<div class="photo_star">
        <div id="container">
            <a id="pickfiles" class="showPic">
                <img src="images/sendPhoto.png">
            </a>
        </div>
    </div>

css更改默认样式代码

    /*默认情况下的颜色*/
    progress::-webkit-progress-bar {
        background: #fff;
    }

  /*进度滚动条的颜色*/
    progress::-webkit-progress-value {
        background: #fd6897;
    }

　　

三、难点和坑

　　七牛发ajax获取token的时候采用cors跨域方法，需要后端的配合否则会报ajax跨域失败的错误，事例代码是没错的，若报这个错，各位前端同胞直接找后台即可。