圖片上傳外掛ImgUploadJS:用HTML5 File API 實現截圖貼上上傳、拖拽上傳
一 . 背景及效果
當前網際網路上傳檔案最多的就是圖片檔案了,但是傳統web圖片的截圖上傳需要:截圖儲存->選擇路徑->儲存後再點選上傳->選擇路徑->上傳->插入。
圖片檔案上傳也需要:選擇路徑再->上傳->插入,步驟繁雜,網際網路體驗為王,如果支援截圖貼上上傳、拖拽上傳將大大提升體驗。
當前知乎和github對現代瀏覽器均支援這兩種特性,閒來無事就學習實現了一下,今天就說一說這個1kb外掛實現什麼功能,怎麼使用和原理。
首先看一下插效果:
-
截圖後直接貼上上傳。
-
拖拽上傳
http網路
二.使用示例
直接呼叫:
<div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
<script type="text/javascript" src="UploadImage.js"></script>
new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回撥
var img = new Image();
img.src = xhr.responseText;
this.appendChild(img);
});
AMD/CMD
<div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
<script type="text/javascript" src="require.js"></script>
<script>
require(['UploadImage'], function (UploadImage) {
new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回撥
var img = new Image();
img.src = xhr.responseText;
this.appendChild(img);
});
})
</script>
三.瀏覽器支援
當前版本只支援以下,瀏覽器,後期可能會支援更多瀏覽器。
- IE11
- Chrome
- FireFox
- Safari(未測式,理論應該支援)
四.原理及原始碼
- 貼上上傳
處理目標容器(id)的paste事件,讀取e.clipboardData中的資料,如果是圖片進行以下處理:
用H5 File API(FileReader)獲取檔案的base64程式碼,並構建FormData非同步上傳。 - 拖拽上傳
處理目標容器(id)的drop事件,讀取e.dataTransfer.files(H5 File API: FileList)中的資料,如果是圖片並構建FormData非同步上傳。
以下是初版本程式碼,比較簡單。不再贅述。
部份核心程式碼
function UploadImage(id, url, key)
{
this.element = document.getElementById(id);
this.url = url; //後端處理圖片的路徑
this.imgKey = key || "PasteAreaImgKey"; //提到到後端的name
}
UploadImage.prototype.paste = function (callback, formData)
{
var thatthat = this;
this.element.addEventListener('paste', function (e) {//處理目標容器(id)的paste事件
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
var that = this,
reader = new FileReader();
file = e.clipboardData.items[0].getAsFile();//讀取e.clipboardData中的資料:Blob物件
reader.onload = function (e) { //reader讀取完成後,xhr上傳
var xhr = new XMLHttpRequest(),
fd = formData || (new FormData());;
xhr.open('POST', thatthat.url, true);
xhr.onload = function () {
callback.call(that, xhr);
}
fd.append(thatthat.imgKey, this.result); // this.result得到圖片的base64
xhr.send(fd);
}
reader.readAsDataURL(file);//獲取base64編碼
}
}, false);
}
後端及詳細程式碼請移步:github:https://github.com/etoah/ImgUploadJS
五. 其它功能
部份功能還在開發中,歡迎提建議或意見。
評論:
#1樓 2016-01-19 08:57 troy.cui
不錯的,如果有那種多圖上傳的功能就好了
回覆 引用 #2樓 [樓主] 2016-01-19 09:26 Lucien!
@ troy.cui
就是一下拖拽多個圖上傳麼,後期可能會新增此功能.
回覆 引用 #3樓 2016-01-19 09:44 EcitGis
mark
回覆 引用 #4樓 2016-01-19 13:33 為之則易
不錯,期待弄成一個基於HTML5的富文字編輯器
回覆 引用 #5樓 [樓主] 2016-01-19 15:34 Lucien!
@ 為之則易
多謝支援,搞成markdown是不是更好.
回覆 引用 #6樓 2016-01-19 16:17 #張志豪#
好文
回覆 引用 #7樓 2016-01-19 23:17 freed
很棒!
回覆 引用 #8樓 2016-01-20 09:17 julianking
不錯,學習了
回覆 引用 #9樓 2016-01-20 09:35 Yz's
不錯 部落格園就沒這功能=- =
回覆 引用 #10樓 2016-01-20 16:35 天命輝煌
不錯,可以去看看WebUploader
回覆 引用 #11樓 2019-10-10 10:09 梓萱IT民工
這個拖拽功能能否整合到kindEditor編輯器中?
回覆 引用 #12樓 2019-10-10 10:16 愛曉俊
如何將拖拽功能整合到kindEditor編輯器中?
回覆 引用 #13樓 2019-12-04 10:08 208小倩
你好,怎麼實現複製圖片(包括電腦系統裡的、截圖等等),貼上(ctrl+v)直接上傳給後臺