从剪切板粘贴图片上传

最新推荐文章于 2024-08-06 12:18:21 发布
最新推荐文章于 2024-08-06 12:18:21 发布
阅读量6.6k 收藏 5
点赞数 1
分类专栏： javascript 前端 文章标签： 图片上传
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenmoquan/article/details/50899722
版权
本文探讨了如何实现从剪切板粘贴图片进行上传，解释了浏览器中的fakepath现象及其原因。主要步骤包括监听paste事件，获取图片的dataURL，然后利用FormData上传。在不同浏览器中，如Chrome和Firefox，获取图片数据的方法有所不同，需要针对性处理。
摘要由CSDN通过智能技术生成

一个需求：让用户使用剪切板来粘贴图片（而不是将图片保存到本地，然后再选取文件上传）

fakepath是什么鬼

今天做图片上传时发现，不论是什么路径上传的文件，路径都变成了这种格式 “C:\fakepath\文件名”。
这里写图片描述

以前做图片上传时没留意过这个fakepath，直译过来是伪路径，网上搜了一下 说是浏览器为了保护用户的文件安全，隐藏了上传的真实路径，用fakepath代替，或者调整浏览器的相关安全设置可以解决这个问题。

从剪切板获取图片信息

首先要明确两点：

  • 剪切板里可以装1个或者多个数据项
  • 粘贴剪切板里的截图 跟 粘贴一个图片文件 不一样。例如：右键复制一个图片得到的是一个图片文件

我们这里讨论的是前者——剪切板里的截图，暂不考虑后者。从剪切板粘贴图片的教程很多，这里总结一下，大致分为4步：

  1. 拦截元素的paste事件

  2. 找到event数据中的我们需要的图片信息

    e.clipboardData.items[0].type.indexOf('image') > -1

  3. 拿到图片的dataURL

最低0.47元/天 解锁文章
大奋齐
关注
专栏目录
图片粘贴上传(方法二)
pearkerChen
02-25 3054
针对之前的图片粘贴上传方法进行封装，并给出使用案例，如下： 目录 一.封装的文件 1.css文件：paste-img-util.css 2.js文件：paste-img-util.js 3.表单上传js:jquery.form.js  二.页面使用方法 1.顶部css引用 2.中间表单设置 3.底部js应用   一.封装的文件   1.css文件：paste-img-ut...
图片剪切板(文件上传)的实现
aardwolf3801的博客
08-17 320
有有很多用户说新浪博客的图片剪切板很好用，上传方便,研究了一下，确实不错啊，选择文件，单击插入到编辑框中，一次可以选择多个，所见所得，没有弹出窗，方便简洁,见图 2.思路是这样,打开编辑器的时候，后台初始化N个表单和单格，用来存放浏览显示图片 var sFileUpload = '\<form id="form' + _sId + '" title="" enctype="mu...
百度编辑器 实现CTRL+V粘贴图片并上传、WORD粘贴带图片
最新发布
alisky119的博客
08-06 1041
之前网上搜到的方案很少，现在由于HTML5的流行，chrome提供了相关的API，所以在网上也是能够搜到很多方案的，不过99%的方案实际上说的都是同一个方案，也就是借助于HTML5来实现，也就是借助于chrome的API来实现，这个方案的话也是能够满足一般的需求，但是兼容性方面有点问题，不能兼容IE浏览器，我们技术部在对这个方案进行测试的时候发现在有的用户电脑行，有的用户电脑不行，也没找到原因。web富文本编辑器这块他也不是很熟，之前也没怎么用过，然后又在网上找资料，帮他解决各种配置的问题。
实现剪切板粘贴上传图片并返回URl显示图片
java学习者
12-04 1221
在写聊天功能时，需要实现剪切板粘贴上传图片并返回URl显示图片 $('#input-area').bind("paste", function(){ //获取截图 var items = (event.clipboardData || window.clipboardData).items; var file = null; if (items &...
图片的粘贴上传
weixin_34032792的博客
11-30 102
如果浏览器支持HTML5，通过past事件就可以获取图片的base64位字符，这样就可以实现图片的粘贴上传。 前端： &lt;div id="imgDiv" style="border: 1px solid darkblue"&gt; CTRL+V即可实现粘贴 &lt;/div&gt; &lt;script type="text/javascript"&gt; ..
JS 从剪贴板上传图片
weixin_34319111的博客
06-30 228
    用Ubuntu两年多了,习惯了Ubuntu的操作感觉比WIN用起来还爽,就一点不爽,生态应用很少,好多WIN上好用的软件在Ubuntu找不到的,希望以后的软件可以做到一次编译全平台通用. 即使用上Wine有的软件应用也存在兼容性问题.比如QQ,Photoshop,微信,旺旺. 所以,在Ubuntu使用过程中,习惯了用web来访问,凡事web-Application通通喜欢. 微信和钉钉...
Vue解析剪切板图片并实现发送功能
10-15
在Vue开发中，有时候我们需要实现类似QQ聊天那样的功能，即用户可以通过剪切板粘贴图片并发送。本文将详细介绍如何在Vue中解析剪切板中的图片，并将其发送出去。首先，我们来看一下实现这个功能的主要步骤。 1. **...
Vue实现剪切板图片压缩功能
11-21
监听剪切板粘贴事件，读取剪切板中的图片文件，转成base64通过img标签显示出来，此时可能会存在剪切板中图片过大，产生上传速度慢问题，接下来就跟大家分享下如何将base64图片进行压缩。先跟大家展示下最终实现的...
用Delphi写的从剪切板获取图片Base64String的ActiveX插件
10-21
在实际应用中，这个ActiveX插件可以集成到Web页面或桌面程序中，使得用户能够直接从剪切板粘贴图片，而无需先保存图片再上传。这对于需要快速上传图片的在线表单或聊天应用来说非常实用，极大地提高了用户体验。 ...
异步跨域上传从剪贴板上传图片
qq_21987433的博客
05-22 208
首先跨域的需求是必须的，由程序架构所决定。 关于跨域那最先想到的还是jq的ajax的jsonp,可是jsonp只能使用get的方式，图片数据太大有可能就不稳定。最终决定使用formdata封装file对象，使用XMLHttpRequest对象发送请求数据。 为了模拟跨域，分别在本地的两个服务器localhost:80和localhost:8090部署后端和前端的代码 前端代码： <...
react-copyable:剪贴板可复制React组件
04-28
＃react-copyable剪贴板可复制React组件 剪贴板可复制文本组件的实现。 用法 var React = require ( 'react' ) , Copyable = require ( 'react-copyable' ) ; ... render : function ( ) { return ( < Copyable xss=removed> ) ; } . . . 剪贴板访问取决于函数。 如果浏览器不支持该功能，则只能选择文本值，并且可以使用本机操作（例如按Ctrl + C ...）进行复制。 客制化 有两个用于自定义组件的道具： 提供onCopy处理程序，用于何时成功复制到剪贴板 该组件具有内联定义的样式。 通过style道具覆盖样式
Vue3&el-upload 实现图片粘贴上传，截图粘贴上传
weixin_43680337的博客
12-14 1255
用户点击左侧最上边的输入框，在按住control+V，就能把粘贴板复制的图片传输到el-upload组件中，并自动进行上传（上传后就是业务逻辑部分，识别图片中的文字或者表格，并在前端页面就能预览表格，还能下载机器生成的Excel文件，后续再写一篇文章介绍怎么实现页面上的表格一件复制，然后在本地的Excel或者WPS，Numbers等软件带格式的粘贴）。这个功能已经上线了，如果大家想看一下效果，可以。读取粘贴板内容并传给el-upload。代码实现，直接拷贝就能用。先定义一个input框。
使用JavaScript实现粘贴上传图片
Bekind2010的专栏
12-21 1404
本文将介绍如何使用JavaScript实现粘贴上传图片的功能，包括剪贴板操作、图片解析和文件上传等方面。通过阅读本文，您将了解如何使用JavaScript和相关API来处理用户粘贴的图片，并将其上传到服务器。
javascript从剪贴板获取图片
vegetable菜的博客
11-07 1082
示例为vue项目 预览:http://icelily.xyz/colorpicker 通过clipboarData获取剪贴板数据,遍历clipboardData.items获取类型为'file'的则为剪贴板图像内容。然后通过FileReader读取,赋值为Image的src. 完整代码:http://icelily.xyz/?p=824 ...
在线编辑器 实现ctrl+v粘贴图片并上传、word粘贴带图片
Mr_Zang666的博客
04-19 346
"Servers" :[{"url":"www.ncmem.com"},{"url":"www.xproerui.com"}]//内部服务器地址(不下载此地址中的图片)JPG/PNG/GIF/BMP，推荐使用JPG格式，防止出现大图片。, "PasteImageType" : "" //粘贴文件，剪帖板的图片格式，为空表示本地图片格式。, "PasteImgSrc" : "" //shape:优先使用源公式图片，img:使用word自动生成的图片。
解决浏览器 fakepath 实现图片上传预览
一抹茶-CSDN的博客
01-08 3717
fakepath是什么？ 这是浏览器处于安全性考虑的，比如文件路径会暴露你的用户名或者其他内容，而通过fakepath直接代替了其中的路径名，保护隐私和安全。至于IE6为什么可以，这个就不用说了吧… 解决办法：工具 -&amp;amp;amp;gt; Internet选项 -&amp;amp;amp;gt; 安全 -&amp;amp;amp;gt; 自定义级别 -&amp;amp;amp;gt; 找到“其他”中的“将本地文件上载至服务器时包含本地目录路径”，选中“启用”即
解决本地文件上传时fakepath的问题
热门推荐
pleasecallme_522的博客
01-01 4万+
首先应该看一下fakepath问题具体指的是什么：在写页面时，需要选择本地的图片上传给服务器，同时将选择的图片预览在页面中，代码是这样写的：$("input[type='file']").on('change', function () { $('.content').attr('src',$(this).val()); alert($(this).val()); });我是这样选择
c盘fakepath是什么意思_新到手的笔记本需要做什么？
weixin_39887577的博客
11-23 1581
现在笔记本性能越强花费也会越高，攒一台机器也不是那么容易，更不用提学生党了。实体店溢价太高，杀熟也越来越严重，甚至以次充好，那么新的笔记本到手后应该怎么检测和优化呢。1、检查外观有无磕碰。2、插电源开机。【建议】3、一般新到的机器不会马上进入桌面，会引导你进行初始设置，如创建用户名、密码等。【注意】如果你插入了能联网的有线宽带或连接了WIFI，操作系统会额外引导你注册Microsoft账...
Delphi从剪切板粘贴jpg格式图片
06-01
在Delphi中，你可以使用TClipboard组件来访问系统剪贴板。要从剪贴板中获取图片，你可以使用以下代码： ```delphi if Clipboard.HasFormat(CF_BITMAP) then begin Image1.Picture.Bitmap.Assign(Clipboard); end; ``` 上述代码将从剪贴板中获取位图，并将其分配给名为Image1的TImage组件。如果你想要从剪贴板中获取JPG格式的图像，你可以使用以下代码： ```delphi if Clipboard.HasFormat(CF_PICTURE) then begin var JPEGStream := TMemoryStream.Create; try Clipboard.GetFormat(CF_PICTURE).SaveToStream(JPEGStream); JPEGStream.Position := 0; Image1.Picture.LoadFromStream(JPEGStream); finally JPEGStream.Free; end; end; ``` 上述代码将从剪贴板中获取图像，并将其保存到TMemoryStream中。然后，图像将从TMemoryStream加载到名为Image1的TImage组件中。请注意，CF_PICTURE是一个自定义剪贴板格式，你需要在使用它之前注册它。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值