一. 背景及效果
目前網路上傳檔案最多的就是圖片檔案了，但是傳統web圖片的截圖上傳需要：截圖儲存->選擇路徑->儲存後再點擊上傳->選擇路徑->上傳->插入。
圖片檔案上傳也需要：選擇路徑再->上傳->插入，步驟繁雜，網路體驗為王，如果支援截圖貼上上傳、拖曳上傳將大大提升體驗。
當前知乎和github對現代瀏覽器均支援這兩種特性，閒來無事就學習實現了一下，今天就說一說這個1kb插件實現什麼功能，怎麼使用和原理。
先看一下插效果:
截圖後直接貼上上傳。
拖曳上傳
http網路
二.使用範例 直接呼叫：
XML/HTML Code複製內容到剪貼簿
- div id="box" style="width: 800px; height: 400px; border: 800px; height: 400px; border:1px ="true">div>
script type=type=type= src="UploadImage.js"> script>
- new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回呼
- var img = new
- img.src = xhr.
this.appendChild(img);
- });
-
AMD/CMD
XML/HTML Code
複製內容到剪貼簿
- div id=id=id 樣式=「寬度：800 像素；高度：400 像素；邊框：1 像素實心；」 🎜>內容可編輯="true">div>
-
腳本 類型=類型 " src="require.js"> 腳本>
-
腳本>
- require(['UploadImage'], 函數 (UploadImage) {
- new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回呼
-
var img = 新
-
img.src = xhr.
this.appendChild(img);
- });
- })
-
腳本>
三.瀏覽器支援
目前版本只支援以下，瀏覽器，升級可能會支援更多瀏覽器。
•IE11 •Chrome •FireFox
•Safari(未測式，理論應支持)
四.原理及源碼
1 .貼上上傳處理目標容器（id）的paste事件，讀取e.clipboardData中的數據，如果是圖片進行以下處理：
用H5 File API(FileReader)獲取文件的base64代碼，並建構FormData異步上傳。
2.拖曳上傳
處理目標容器（id）的drop事件，讀取e.dataTransfer.files（H5 File API: FileList）中的數據，如果是圖片並建立FormData異步上傳。
以下是初步版本程式碼，比較簡單。不再贅述。 部分核心程式碼
XML/HTML 程式碼
將內容複製到剪貼簿
- function UploadImage(id, url, key)
- {
-
this.element = document.getElementById(id));
-
this.url = url; //後端處理圖片的路徑
-
this.imgKey = key "PasteAreaI>key 🎜>
- }
-
UploadImage.prototype.paste = function{
- var thatthat
- = this;
this.element.addEventListener('paste', function (e) {//處理目標容器（id）的paste事件
if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image')
- >
- 🎜>
var that =
- this, this, this, J
-
reader = new FileReader();
file-
= e.clipboardData.items[0].getAsFile();//讀取e.clipboardData 🎜>
reader.onload
= -
🎜>
var xhr = new
- XMLHttpRequest(), >
fd = formData || (newo>Datao());;
- 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);
-
}
-
-
