javascript - 粘贴一段带有图片和文字的内容，如何使用js实现获取图片并上传到服务器？

问题描述

问 题

需要粘贴一段带有文字和图片的内容，但是需要将图片单独上传服务器，如何将图片从粘帖内容里面帅选出来。。

解决方案

大概思路：

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. 访问这个地址就可以看到图片了

这篇关于javascript - 粘贴一段带有图片和文字的内容，如何使用js实现获取图片并上传到服务器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！