資訊專欄INFORMATION COLUMN
摘要：我們的功能需要用到的接口事件讀取完成，無論成功與否，還有方法將文件讀取為。檢測是否為圖片類型圖片的編碼這里設(shè)置獲取的數(shù)據(jù)獲取后臺的給的將文件讀取為上傳事件當?shù)臅r候說明我們成功的把圖片傳上七牛了，并且七牛給我們返回了一個字符串。
最近在做的一個聊天消息的功能。有個圖片上傳的功能，可以通過按鈕上傳也可以通過Ctrl+V上傳。按鈕上傳的我們可以通過七牛的API就可以做了，我們現(xiàn)在來說說Ctrl+V的實現(xiàn)是怎么樣的。
涉及到的APIFileReader()
paste事件
關(guān)于imageFile，用來把文件讀入內(nèi)存，并且讀取文件中的數(shù)據(jù)。提供一個異步的api，使用該api可以在瀏覽器主線程中異步訪問文件系統(tǒng)，讀取文件中的數(shù)據(jù)。我們的功能需要用到FileReader的接口事件onloadend(讀取完成，無論成功與否)，還有方法readAsDataURL(將文件讀取為DataURL)。關(guān)于FileReader更多的事件和方法感興趣的同學可以自己去搜索，這里就不深究了。
1.結(jié)構(gòu)我們用的是textarea這個標簽，為什么不使用div呢，因為是還有@功能，為了兼容兩種方案。
//獲取id
var textapp = document.getElementById("app");
2.綁定輸入框的paste事件
我們這里的思路是通過檢測粘貼的對象類型，如果是圖片的話就拿到圖片的base64位。并且在圖片被讀取完成的時候，我們在去請求后臺拿到token。并且在拿到了token后我們就去請求七牛的API。
textapp.addEventListener("paste", function(e){
for (var i = 0; i < e.clipboardData.items.length; i++) {
// 檢測是否為圖片類型
if (e.clipboardData.items[i].kind == "file" && /image//.test(e.clipboardData.items[i].type)) {
var imageFile = e.clipboardData.items[i].getAsFile();
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
//圖片的base64編碼
console.log(e.target.result);
//這里設(shè)置獲取token的數(shù)據(jù)
var thetoken = "";
var head = {
"cmd": 0x4000C,
"uid": parseInt(EXTUID),
"ver": 1,
"sid": SID,
"apptype":1,
"entry_type": 2
}
var rdata = {
"head":head
}
rdata = JSON.stringify(rdata);
//獲取后臺的給的token
$.post(request_url_server,rdata,function(data,status){
if (status == "success") {
if (data["ret"] == 0){
var thetoken = data["token"];
pubt64(e.target.result.replace("data:image/png;base64,",""), imageFile, thetoken);
}
}
});
};
//將文件讀取為DataUrl
fileReader.readAsDataURL(imageFile);
e.preventDefault();
break;
}
}
});
3.上傳事件
當xhr.readyState==4的時候說明我們成功的把圖片傳上七牛了，并且七牛給我們返回了一個json字符串。我們把這個字符串轉(zhuǎn)化成json對象，里面包含有圖片的key值，hash值，現(xiàn)在我們就拿到了key把消息發(fā)送給服務(wù)端啦。
function pubt64(pic,imageFile,thetoken){
//圖片的base64位
var pic = pic;
//imageFile.size為圖片流的大小
var url = "http://upload.qiniu.com/putb64/"+imageFile.size;
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState==4){
// 成功
console.log(xhr.responseText);
//轉(zhuǎn)換成json對象，包含key值，hash值。
var dataImg = JSON.parse(xhr.responseText);
//發(fā)送給服務(wù)端消息
sendImg("paste", dataImg);
}
}
xhr.open("POST", url, true);
xhr.setRequestHeader("Content-Type", "application/octet-stream");
xhr.setRequestHeader("Authorization", "UpToken "+thetoken);
xhr.send(pic);
}
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90818.html
摘要：由于我們的富文本輸入框比較簡單，所以只需要處理兩類數(shù)據(jù)即可，其一是普通的文本類型數(shù)據(jù)，包括表情其二則是圖片類型數(shù)據(jù)。 最近折騰 Websocket，打算開發(fā)一個聊天室應(yīng)用練練手。在應(yīng)用開發(fā)的過程中發(fā)現(xiàn)可以插入 emoji ，粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識，于是便打算記錄下來和大家分享。 倉庫地址：chat-input-box預覽地址：https://codepen.io...
摘要：最近基于開發(fā)了一款圖床插件，現(xiàn)在已經(jīng)開源并上架應(yīng)用商店。通過方法把轉(zhuǎn)成，然后放在里測試一下看來效果是的，接下來就是對圖床插件進行開發(fā)的步驟了。至此，整個插件的開發(fā)發(fā)布流程就已經(jīng)完成了。 showImg(https://user-images.githubusercontent.com/12172868/57382983-8f29b900-71e0-11e9-8fe9-c0f12fd54...
摘要：原文使用七牛云存儲的一些經(jīng)驗總結(jié)錯誤處理如果在與七牛的交互中出現(xiàn)狀態(tài)碼為的錯誤，一句話，不要猶豫，直接聯(lián)系七牛技術(shù)支持。但是筆者發(fā)現(xiàn)，在使用七牛云轉(zhuǎn)化后的視頻，這樣做是無效的。 近段時間將使用七牛云存儲來存放用戶上傳的數(shù)據(jù)，客戶端通過七牛的js-sdk與七牛交互，服務(wù)端C#實現(xiàn)了七牛相關(guān)的接口。在這過程中多多少少遇到點問題，在這里總結(jié)一下。原文：使用七牛云存儲的一些經(jīng)驗總結(jié) 599錯...
摘要：如果有錯誤，，可通過下文中的監(jiān)聽函數(shù)拿到該錯誤碼進行自定義處理是一個數(shù)組，返回若干圖片的線上地址圖片地址圖片地址參考部分 最近看了一些有關(guān)于js實現(xiàn)圖片粘貼上傳的demo,實現(xiàn)如下: (這里只能檢測到截圖粘貼和圖片右鍵復制之后粘貼) demo1: document.addEventListener(paste, function (event) { consol...
閱讀 701·2021-11-22 09:34
閱讀 3834·2021-09-22 15:42
閱讀 1346·2021-09-03 10:28
閱讀 1087·2021-08-26 14:13
閱讀 1915·2019-08-29 15:41
閱讀 1441·2019-08-29 14:12
閱讀 3379·2019-08-26 18:36
閱讀 3321·2019-08-26 13:47
