摘要:如果有錯誤,,可通過下文中的監聽函數拿到該錯誤碼進行自定義處理是一個數組,返回若干圖片的線上地址圖片地址圖片地址參考部分
最近看了一些有關于js實現圖片粘貼上傳的demo,實現如下: (這里只能檢測到截圖粘貼和圖片右鍵復制之后粘貼)
demo1:
document.addEventListener("paste", function (event) { console.log(event) var isChrome = false; if ( event.clipboardData || event.originalEvent ) { //not for ie11 某些chrome版本使用的是event.originalEvent var clipboardData = (event.clipboardData || event.originalEvent.clipboardData); if ( clipboardData.items ) { // for chrome var items = clipboardData.items, len = items.length, blob = null; isChrome = true; //items.length比較有意思,初步判斷是根據mime類型來的,即有幾種mime類型,長度就是幾(待驗證) //如果粘貼純文本,那么len=1,如果粘貼網頁圖片,len=2, items[0].type = "text/plain", items[1].type = "image/*" //如果使用截圖工具粘貼圖片,len=1, items[0].type = "image/png" //如果粘貼純文本+HTML,len=2, items[0].type = "text/plain", items[1].type = "text/html" // console.log("len:" + len); // console.log(items[0]); // console.log(items[1]); // console.log( "items[0] kind:", items[0].kind ); // console.log( "items[0] MIME type:", items[0].type ); // console.log( "items[1] kind:", items[1].kind ); // console.log( "items[1] MIME type:", items[1].type ); //阻止默認行為即不讓剪貼板內容在div中顯示出來 event.preventDefault(); //在items里找粘貼的image,據上面分析,需要循環 for (var i = 0; i < len; i++) { if (items[i].type.indexOf("image") !== -1) { //getAsFile() 此方法只是living standard firefox ie11 并不支持 blob = items[i].getAsFile(); uploadImgFromPaste(blob, "paste", isChrome); } } /*if ( blob !== null ) { var reader = new FileReader(); reader.onload = function (event) { // event.target.result 即為圖片的Base64編碼字符串 var base64_str = event.target.result;//獲得圖片base64字符串 //可以在這里寫上傳邏輯 直接將base64編碼的字符串上傳(可以嘗試傳入blob對象,看看后臺程序能否解析) uploadImgFromPaste(base64_str, "paste", isChrome); } reader.readAsDataURL(blob);//傳入blob對象,讀取文件 }*/ } else { //for firefox setTimeout(function () { //設置setTimeout的原因是為了保證圖片先插入到div里,然后去獲取值 var imgList = document.querySelectorAll("#aaa img"), len = imgList.length, src_str = "", i; for ( i = 0; i < len; i ++ ) { if ( imgList[i].className !== "my_img" ) { //如果是截圖那么src_str就是base64 如果是復制的其他網頁圖片那么src_str就是此圖片在別人服務器的地址 src_str = imgList[i].src; } } uploadImgFromPaste(src_str, "paste", isChrome); }, 1); } } else { //for ie11 setTimeout(function () { var imgList = document.querySelectorAll("#aaa img"), len = imgList.length, src_str = "", i; for ( i = 0; i < len; i ++ ) { if ( imgList[i].className !== "my_img" ) { src_str = imgList[i].src; } } uploadImgFromPaste(src_str, "paste", isChrome); }, 1); } }) //調用圖片上傳接口,將file文件以formData形式上傳 function uploadImgFromPaste (file, type, isChrome) { var formData = new FormData(); formData.append("files", file); formData.append("submission-type", type); var xhr = new XMLHttpRequest(); xhr.open("POST", "/upload_editor_photo3"); xhr.onload = function () { console.log(xhr.readyState); if ( xhr.readyState === 4 ) { if ( xhr.status === 200 ) { var data = JSON.parse(xhr.responseText), editor = document.getElementById("aaa"); if ( isChrome ) { var len=data.data.length; for ( var i = 0; i < len; i ++) { var img = document.createElement("img"); img.className = "my_img"; img.src = data.data[i]; //設置上傳完圖片之后展示的圖片 editor.appendChild(img); } } else { var imgList = document.querySelectorAll("#aaa img"), len = imgList.length, i; for ( i = 0; i < len; i ++) { if ( imgList[i].className !== "my_img" ) { imgList[i].className = "my_img"; imgList[i].src = data.data[i]; } } } } else { console.log( xhr.statusText ); } }; }; xhr.onerror = function (e) { console.log( xhr.statusText ); } xhr.send(formData); }
demo2:
// 處理粘貼事件
$("#aaa").on("paste", function(eventObj) { // 處理粘貼事件 var event = eventObj.originalEvent; var imageRe = new RegExp(/image/.*/); var fileList = $.map(event.clipboardData.items, function (o) { if(!imageRe.test(o.type)){ return } var blob = o.getAsFile(); return blob; }); if(fileList.length <= 0){ return } upload(fileList); //阻止默認行為即不讓剪貼板內容在div中顯示出來 event.preventDefault(); }); function upload(fileList) { for(var i = 0, l = fileList.length; i < l; i++){ var fd = new FormData(); var f = fileList[i]; fd.append("files", f); var editor=document.getElementById("aaa"); $.ajax({ url:"/upload_editor_photo3", type: "POST", dataType: "json", data: fd, processData: false, contentType: false, xhrFields: { withCredentials: true }, headers: { "Access-Control-Allow-Origin": "*", "Access-Control-Allow-Credentials": "true" }, success: function(res){ var len=res.data.length; for ( var i = 0; i < len; i ++) { var img = document.createElement("img"); img.src = res.data[i]; //設置上傳完圖片之后展示的圖片 editor.appendChild(img); } }, error: function(){ alert("上傳圖片錯誤"); } }); } }
注意:因為只支持右鍵復制圖片,所以并不能一下復制兩張圖片,所有圖片復制并粘貼上傳待研究.
html:
接口返回數據格式:
{ // errno 即錯誤代碼,0 表示沒有錯誤。 // 如果有錯誤,errno != 0,可通過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理 errno: 0, // data 是一個數組,返回若干圖片的線上地址 data: [ "圖片1地址", "圖片2地址", "……" ] }
參考部分:http://www.jb51.net/article/8...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/89598.html
摘要:本文使用署名國際許可協議,歡迎轉載或重新修改使用,但需要注明來源。署名國際本文作者蘇洋創建時間年月日統計字數字閱讀時間分鐘閱讀本文鏈接使用和快速實現一個在線的解碼服務本文將會介紹如何使用完成一個簡單的二維碼解析服務,全部代碼在行以內。 本文使用「署名 4.0 國際 (CC BY 4.0)」許可協議,歡迎轉載、或重新修改使用,但需要注明來源。 署名 4.0 國際 (CC BY 4.0) ...
摘要:由于我們的富文本輸入框比較簡單,所以只需要處理兩類數據即可,其一是普通的文本類型數據,包括表情其二則是圖片類型數據。 最近折騰 Websocket,打算開發一個聊天室應用練練手。在應用開發的過程中發現可以插入 emoji ,粘貼圖片的富文本輸入框其實蘊含著許多有趣的知識,于是便打算記錄下來和大家分享。 倉庫地址:chat-input-box預覽地址:https://codepen.io...
摘要:平時的開發中我們難免要上傳一些網頁截圖圖片等,傳統的選擇文件上傳使用起來不方便,這里介紹一種使用和實現的剪切板黏貼上傳圖片功能。剪切板中圖片的獲取與上傳通過,我們可以以的形式獲取到剪切板中的圖片,然后將數據作為參數通過的方式傳輸到服務器端。 平時的開發中我們難免要上傳一些網頁截圖、圖片等,傳統的選擇文件上傳使用起來不方便,這里介紹一種使用js和node實現的剪切板黏貼上傳圖片功能。當我...
摘要:二編輯合成照片使用編輯壓縮重設尺寸比例轉成輸出預覽。三保存并上傳照片提交數據到服務器需要服務器支持我跳過了。數據主要來自拍攝的照片,多用于移動端開發,端也會用到,此插件兼容主流瀏覽器,以下不支持。 系列文章 關于前端上傳文件全面基礎掃盲貼(零)關于前端上傳文件全面基礎掃盲貼(一) ----- XMLHttpRequest關于前端上傳文件全面基礎掃盲貼(二) ----- File關于前端...
摘要:最近在實現一個功能,需求如下前提當前頁面無彈窗頁面任意位置執行粘貼讀取剪切板中的截屏數據上傳截圖首先還是從網上找相關的例子。找到了上的專欄文章獲取剪切板內容,控制圖片粘貼。 最近在實現一個功能,需求如下: 前提:當前頁面無彈窗 頁面任意位置執行粘貼 讀取剪切板中的截屏數據 上傳截圖 首先還是從網上找相關的例子。 找到了SF上的專欄文章《js獲取剪切板內容,js控制圖片粘貼》。 于是...
閱讀 725·2021-11-17 09:33
閱讀 3757·2021-09-01 10:46
閱讀 1751·2019-08-30 11:02
閱讀 3280·2019-08-29 15:05
閱讀 1396·2019-08-26 11:39
閱讀 2272·2019-08-23 17:04
閱讀 1973·2019-08-23 15:43
閱讀 1371·2019-08-23 14:12