首先說(shuō)明...如果說(shuō)的不對(duì)請(qǐng)留言糾正我，謝謝
最近要搞一個(gè)上傳圖片的
介種界面
之前我搞過(guò)七牛云JS SDK ，覺(jué)得很可怕，很復(fù)雜，但是最后我通過(guò)參考別人的demo做出來(lái)，我一直搞不懂SDK跟我現(xiàn)在做的 上傳base64編碼圖片 到七牛云 有什么區(qū)別...回來(lái)回來(lái)正題...
html結(jié)構(gòu)參考dropify
需求是點(diǎn)擊正方形，就彈出選擇文件對(duì)話框，選擇圖片之后就會(huì)顯示在正方形里。
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; }
重點(diǎn)來(lái)了，作為一個(gè)渣渣的我，不夠細(xì)心，遇到坑點(diǎn)也是多的
-
var pic要的是data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAnoAAAJeCAYAA.......里逗號(hào)之后的字符串 -
http://upload.qiniu.com這是華東的，如果不確定自己是什么地區(qū)，登錄一下七牛看儲(chǔ)存空間列表
儲(chǔ)存空間列表 -
url中http://upload.qiniu.com/putb64/size/key/000這里的000是寫(xiě)自定義文件名 -
xhr.responseText是字符串！字符串！字符串！要取到屬性key先轉(zhuǎn)換json格式 -
xhr.setRequestHeader("Authorization", "UpToken 你自己的七牛token")記得別刪除UpToken單詞后面有一個(gè)空格的
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)聽(tīng)文件讀取結(jié)束后事件
reader.onloadend = function (e) {
var size = e.total;
if(size>1048576){
alert('圖片大小不能超過(guò)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; // 填寫(xiě)你的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('').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();
}
會(huì)的我都說(shuō)了，其實(shí)我還想做一個(gè)判斷該圖片是否能讀取的，因?yàn)槿我庖粋€(gè)文件后綴名改成圖片格式的都可以上傳，但是圖片是顯示不出來(lái)的，這時(shí)我想提示上傳的文件格式有誤。一開(kāi)始我是判斷xhr.getResponseHeader('content-type')，后來(lái)發(fā)現(xiàn)返回的都是json格式，哈哈哈哈，然后就不知道怎么判斷...
