javascript - 貼上一段帶有圖片和文字的內容，如何使用js實作獲取圖片並上傳到伺服器？

Question

要貼上一段帶有文字和圖片的內容，但是需要將圖片單獨上傳伺服器，如何將圖片從貼文內容裡面帥選出來。 。

Answer 1

大概思路：

1. 監聽onpaste事件

2. 透過事件回呼中的event參數，取得剪貼簿資料event.clipboardData(不是所有的瀏覽器都支援)

   // '/image/.test(event.clipboardData.types)' // 检查是否为图片
   
   // 获取图片二进制数据（似乎浏览器的实现都会有大小差异）
   Array.each(event.clipboardData.items, function(item){
   if (/image/.test(item.type)) {
   var blob = item.getAsFile();
   var URL = window.URL || window.webkitURL;
   var source = URL.createObjectURL(blob);
   console.log(source) 
   }
   });

3. 透過Ajax將資料傳送到後端伺服器，後端將圖片儲存起來後，回傳一個圖片可存取位址

4. 訪問這個地址就可以看到圖片了