圖片上傳外掛ImgUploadJS：用HTML5 File API 實作截圖貼上上傳、拖曳上傳 _html5教學技巧

一. 背景及效果

目前網路上傳檔案最多的就是圖片檔案了，但是傳統web圖片的截圖上傳需要：截圖儲存->選擇路徑->儲存後再點擊上傳->選擇路徑->上傳->插入。
圖片檔案上傳也需要：選擇路徑再->上傳->插入，步驟繁雜，網路體驗為王，如果支援截圖貼上上傳、拖曳上傳將大大提升體驗。
當前知乎和github對現代瀏覽器均支援這兩種特性，閒來無事就學習實現了一下，今天就說一說這個1kb插件實現什麼功能，怎麼使用和原理。
先看一下插效果:
截圖後直接貼上上傳。

拖曳上傳

http網路

二.使用範例
直接呼叫：

XML/HTML Code複製內容到剪貼簿

1. div id="box" style="width: 800px; height: 400px; border: 800px; height: 400px; border:1px ="true">div>    
script type=type=type= src="UploadImage.js"> script>    
2. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回呼    
3. var img = new 
4. img.src = xhr.  this.appendChild(img);    
5. }); 

AMD/CMD

XML/HTML Code

複製內容到剪貼簿

1. div id=id=id 樣式=「寬度：800 像素；高度：400 像素；邊框：1 像素實心；」 🎜>內容可編輯="true">div>     
2. 腳本 類型=類型 " src="require.js"> 腳本>    
3. 腳本>    
4. require(['UploadImage'], 函數 (UploadImage) {    
5. new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上傳完成後的回呼   
6. var img = 新 
7. img.src = xhr.  this.appendChild(img);    
8. });    
9. })    
11. 腳本>   

三.瀏覽器支援

目前版本只支援以下，瀏覽器，升級可能會支援更多瀏覽器。
•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 程式碼

將內容複製到剪貼簿

1. function UploadImage(id, url, key)    
2. {    
3. this.element = document.getElementById(id));
4. this.url = url; //後端處理圖片的路徑    
5. this.imgKey = key  "PasteAreaI>key 🎜>
6. }    
7. UploadImage.prototype.paste = function{    
8. var thatthat
9.  = this;   this.element.addEventListener('paste', function (e) {//處理目標容器（id）的paste事件     if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') 
10. > 
11. 🎜> var that = 
12. this,    this,    this,    J
13. reader = new FileReader();
file
14.  = e.clipboardData.items[0].getAsFile();//讀取e.clipboardData 🎜> reader.onload
 = 
15. 🎜> var xhr = new
16.  XMLHttpRequest(), > fd = formData || (newo>Datao());;
17. xhr.open('POST', thatthat.url, true);     xhr.onload = function
18.  () {   > callback.call(that, xhr);    
19. }     fd.append(thatthat.imgKey, this.result); // this.result得到圖片的base64     xhr.send(fd);    
20. }    
21. reader.readAsDataURL(file);//取得base64編碼    
22. }    
23. }, false);    
24. }