Js實現貼上上傳圖片的原理及示例
我們或多或少都使用過各式各樣的富文字編輯器，其中有一個很方便功能，複製一張圖片然後貼上進文字框，這張圖片就被上傳了，那麼這個方便的功能是如何實現的呢？
原理分析：
複製=>貼上=>上傳
在這個操作過程中，我們需要做的就是：監聽貼上事件=>獲取剪貼簿裡的內容=>發請求上傳
需要明白的是：
我們只能上傳截圖工具截的圖片(qq截圖、微信截圖等)，不能貼上上傳系統裡的圖片(從桌面上、硬盤裡複製)，因為他們是存在完全不同的地方。
知悉paste event這個事件：當進行貼上（右鍵paste/ctrl+v）操作時，該動作將觸發名為'paste'的剪貼簿事件，這個事件的觸發是在剪貼簿裡的資料插入到目標元素之前。如果目標元素（游標所在位置）是可編輯的元素（設定了contenteditable屬性的div。textarea並不行），貼上動作將把剪貼簿裡的資料，以最合適的格式，插入到目標元素裡；如果目標元素不可編輯，則不會插入資料，但依然觸發paste event。資料在貼上的過程中是隻讀的。
監聽了paste事件，也知道了表現形式，接下來就是如何獲取資料了：
chrome有特定的方法，利用clipboardData.items、getAsFile()、new FileReader()等api可以在paste回撥函式裡獲取到剪貼簿裡圖片的base64編碼字串（無論是截圖貼上的還是網頁圖片複製貼上的），ie11，firefox沒有這樣的api，不過依然有辦法可以獲取，因為資料已經表現在img的src裡了，對於截圖貼上的，直接取img的src屬性值（base64），對於網頁貼上的，則把地址傳給後臺，然後根據地址down下來，存在自己的伺服器，最後把新地址返回來交給前端展示就ok了。為了保持一致性便於管理，統一將所有情況（截圖、網頁）中的img的src屬性替換為自己儲存的地址。
完整例子：
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Js實現貼上上傳圖片</title>
<scriptsrc="jquery.js"></script>
</head>
<body>
複製貼上上傳圖片：
<divid="content_img"contentEditable="true"style="width:500px;height:500px;border:1pxsolid#000;"></div>
<script>
document.getElementById('content_img').addEventListener('paste',function(e){
if(!(e.clipboardData&&e.clipboardData.items)){
return;
}
for(vari=0,len=e.clipboardData.items.length;i<len;i++){
varitem=e.clipboardData.items[i];
if(item.kind==="string"){
item.getAsString(function(str){
console.log(str);
alert("請貼上圖片上傳");
})
$("#content_img").html("");
}elseif(item.kind==="file"){
varblob=item.getAsFile();
console.log(blob);
if(blob.size===0){
return;
}
vardata=newFormData();
data.append("image",blob);
$.ajax({
url:"http://www.yzmcms.com/upload.php",type:'POST',cache:false,data:data,processData:false,contentType:false,dataType:"json",success:function(result){
console.log(result);
if(result.status){
varhtml="<imgsrc="+result.data+"width='100'height='100'>";
$("#content_img").append(html);
}else{
console.log(result.message)
}
}
});
//阻止預設行為即不讓剪貼簿內容在div中顯示出來
e.preventDefault();
}
}
});
</script>
</body>
</html>以上就是Js實現貼上上傳圖片的原理及示例的詳細內容，更多關於JS 貼上上傳圖片的資料請關注我們其它相關文章！