圖片上傳插件ImgUploadJS：用HTML5 File API 實現截圖粘貼上傳、拖拽上傳

2020-03-24 17:29:32

字體：大中小

來源：轉載

供稿：網友

HTML 圖片上傳插件ImgUploadJS：用HTML5 File API 實現截圖粘貼上傳、拖拽上傳
一 . 背景及效果

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

二.使用示例
直接調用：
XML/HTML Code復制內容到剪貼板
divid= box 'UploadImage'],function(UploadImage){ newUploadImage( box , UploadHandler.ashx ).upload(function(xhr){//上傳完成后的回調 varimg=newImage(); img.src=xhr.responseText; this.appendChild(img); }); }) /script

三.瀏覽器支持
當前版本只支持以下，瀏覽器，后期可能會支持更多瀏覽器。
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 Code復制內容到剪貼板
this.element=document.getElementById(id); this.url=url;//后端處理圖片的路徑 this.imgKey=key|| PasteAreaImgKey //提到到后端的name } UploadImage.prototype.paste=function(callback,formData) { varthatthat=this; this.element.addEventListener('paste',function(e){//處理目標容器（id）的paste事件 if(e.clipboardData e.clipboardData.items[0].type.indexOf('image') -1){ varthat=this, reader=newFileReader(); file=e.clipboardData.items[0].getAsFile();//讀取e.clipboardData中的數據：Blob對象 reader.onload=function(e){//reader讀取完成后，xhr上傳 varxhr=newXMLHttpRequest(), fd=formData||(newFormData());; 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); }html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：淺談我對AngularJs的認識

下一篇：HTML頁面嵌入視頻與JS控制切換視頻示例詳解