首先說明...如果說的不對請留言糾正我，謝謝
最近要搞一個上傳圖片的

介種界面

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這是華東的，如果不確定自己是什么地區(qū)，登錄一下七牛看儲存空間列表
  
  儲存空間列表
• url中http://upload.qiniu.com/putb64/size/key/000 這里的000是寫自定義文件名
• xhr.responseText是字符串！字符串！字符串！要取到屬性key先轉(zhuǎn)換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);
                //監(jiān)聽文件讀取結(jié)束后事件
                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);  // 執(zhí)行上傳
                };
            }
        });
        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')，后來發(fā)現(xiàn)返回的都是json格式，哈哈哈哈，然后就不知道怎么判斷...

我還想...點擊刪除按鈕是刪除七牛存儲的文件，而不是只是清除頁面文件痕跡，不過我想...這應(yīng)該要后臺給接口給我吧...