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

介种界面

html
<div class="book-pic-wrapper">
    <div class="book-pic-message">
        <span class="file-icon"></span>
        <p>格式:JPG、PNG</p>
        <p>大小:小于1m</p>
    </div>
    <input class="input-file" type="file" onclick="upload(this)">
    <button class="book-pic-clear" type="button" onclick="del(this)">删除</button>
    <div class="book-pic-preview"></div>
</div>

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('<form></form>');
        $(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格式，哈哈哈哈，然后就不知道怎么判断...

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