如何上传base64编码图片到七牛云

首先说明...如果说的不对请留言纠正我，谢谢
最近要搞一个上传图片的

介种界面

之前我搞过七牛云JS SDK ，觉得很可怕，很复杂，但是最后我通过参考别人的demo做出来，我一直搞不懂SDK跟我现在做的 上传base64编码图片 到七牛云 有什么区别...回来回来正题...
html结构参考 dropify
需求是点击正方形，就弹出选择文件对话框，选择图片之后就会显示在正方形里。

html

    

        
        
格式:JPG、PNG
        
大小:小于1m
    
    
    删除
    

css
 .book-pic-wrapper { display: block; position: relative; cursor: pointer; overflow: hidden; width: 210px; height: 210px; font-size: 14px; line-height: 22px; color: #777; background-color: #f2f2f2; text-align: center;float: left; margin-right: 40px;}
 .book-pic-wrapper .book-pic-message { position: relative; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
 .book-pic-wrapper .book-pic-message span.file-icon { position: relative; display: inline-block; width: 50px; height: 50px; background: url(../../images/bg.png) no-repeat -122px -353px; }
 .book-pic-wrapper input { position: absolute; top: 0; right: 0; opacity: 0; cursor: pointer; z-index: 5; font-size: 154px;}
 .book-pic-wrapper .book-pic-clear { width: 100%; height: 60px; display: none; border: none; position: absolute; opacity: 0; z-index: 7; top: 154px; right: 0; background: none; text-transform: uppercase; font-size: 16px; color: #FFF; -webkit-transition: all 0.15s linear; transition: all 0.15s linear; }
 .book-pic-wrapper:hover .book-pic-clear { opacity: 1; }
 .book-pic-wrapper .book-pic-preview { display: none; position: absolute; z-index: 1; background-color: #FFF; padding: 5px; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; overflow: hidden; text-align: center; }
 .book-pic-wrapper .book-pic-preview img { top: 50%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); position: relative; max-width: 100%; max-height: 100%; background-color: #FFF; }

重点来了，作为一个渣渣的我，不够细心，遇到坑点也是多的

• var pic要的是data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......里逗号之后的字符串
• http://upload.qiniu.com这是华东的，如果不确定自己是什么地区，登录一下七牛看储存空间列表
  
  

  储存空间列表
• url中http://upload.qiniu.com/putb64/size/key/000 这里的000是写自定义文件名
• xhr.responseText是字符串！字符串！字符串！要取到属性key先转换json格式
• xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token") 记得别删除UpToken单词后面有一个空格的

js
function upload(input) {
        $(input).change(function(){
            var file = this.files[0];
            // if(file.type.indexOf('image') != 0) { // 只上传图片}
            if (window.FileReader) {
                var reader = new FileReader();
                reader.readAsDataURL(file);
                //监听文件读取结束后事件
                reader.onloadend = function (e) {
                    var size = e.total;
                    if(size>1048576){
                        alert('图片大小不能超过1M');
                        return;
                    }
                    var data64 = e.target.result; // data64
                    data64 = data64.slice(data64.indexOf(',')+1);  // 截取前缀的base64   data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......
                    putb64(size,data64);  // 执行上传
                };
            }
        });
        function putb64(size,data64){
            var pic = data64;           //  填写你的base64后的字符串
            var url = "http://upload.qiniu.com/putb64/"+size+'/key/'+window.btoa("0612_"+ new Date().getTime()+"_"+parseInt(Math.random()*10));
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                if (xhr.readyState==4){  // xhr.responseText  =>  "{"hash":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ","key":"Fto5o-5ea0sNMlW_75VgGJCv2AcJ"}"
                        $('.book-pic-message').hide();
                        var back_json = JSON.parse(xhr.responseText);
                        $('.book-pic-preview').append('![](http://ogiwpf1aa.bkt.clouddn.com/'+back_json.key+')').show();
                        $('.book-pic-clear').css('background','#4c4c4c').show();
                }
            };
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token");
            xhr.send(pic);
        }
    }
    function del(button) {
        //清除input file已选中的文件
        $(button).siblings('.input-file').wrap('
');
        $(button).siblings('form')[0].reset();
        $(button).siblings('form').find('.input-file').unwrap();
        $(button).siblings('.book-pic-preview').find('img').remove();
        $(button).hide();
        $('.book-pic-preview').hide();
        $('.book-pic-message').show();
    }

会的我都说了，其实我还想做一个判断该图片是否能读取的，因为任意一个文件后缀名改成图片格式的都可以上传，但是图片是显示不出来的，这时我想提示上传的文件格式有误。一开始我是判断xhr.getResponseHeader('content-type')，后来发现返回的都是json格式，哈哈哈哈，然后就不知道怎么判断...

我还想...点击删除按钮是删除七牛存储的文件，而不是只是清除页面文件痕迹，不过我想...这应该要后台给接口给我吧...