在输入框里直接粘贴图片的实现方式
有很多 Web 编辑器支持直接复制粘贴图片,记录一下这种效果是怎么实现的
拿到粘贴板上的 image file 对象
document.querySelector('textarea').addEventListener('paste', e => {
const file = Array.from(e.clipboardData.items)
.find(v => v.type.includes('image'))
?.getAsFile()
})
从 paste
事件的 ClipboardEvent 对象上可以拿到。这里得到的 file 和 <input type="file" />
上传选择文件得到的 file 对象一样。
拿到 file 之后就可以做其他操作如上传到服务器,得到 url 链接等
上传图片
通常需要将拿到的图片文件上传到图床或自己的图片服务器上。
function uploadFile(file) {
return new Promise(resolve => {
setTimeout(() => resolve(URL.createObjectURL(file)), 1000)
})
}
const url = await uploadFile(file)
插回输入框
将上传得到的 image url 插入到输入框光标位置
const insert = `` // img markdown 语法
const { target } = e
const before = target.value.substr(0, target.selectionStart)
const after = target.value.substr(target.selectionEnd)
target.value = before + insert + after
const cursorPosition = (before + insert).length
target.setSelectionRange(cursorPosition, cursorPosition) // 设置光标位置
完整代码如下:
document.querySelector('textarea').addEventListener('paste', async e => {
// 拿到粘贴板上的 image file 对象
const file = Array.from(e.clipboardData.items)
.find(v => v.type.includes('image'))
?.getAsFile()
// 上传到图床服务器拿到 image web url
const url = await uploadFile(file)
// 将 url 插入到输入框光标处
const insert = `` // img markdown 语法
const { target } = e
const before = target.value.substr(0, target.selectionStart)
const after = target.value.substr(target.selectionEnd)
target.value = before + insert + after
const cursorPosition = (before + insert).length
target.setSelectionRange(cursorPosition, cursorPosition)
})
function uploadFile(file) {
return new Promise(resolve => {
setTimeout(() => resolve(URL.createObjectURL(file)), 1000)
})
}
你可以在这里查看运行示例:
https://code.juejin.cn/pen/7309685835798937610
觉得不错,点点小赞:)
关注我】。(●'◡'●)
如果,您希望更容易地发现我的新博客,不妨点击一下绿色通道的【因为,我的写作热情也离不开您的肯定与支持,感谢您的阅读,我是【Jack_孟】!
本文来自博客园,作者:jack_Meng,转载请注明原文链接:https://www.cnblogs.com/mq0036/p/17899772.html
【免责声明】本文来自源于网络,如涉及版权或侵权问题,请及时联系我们,我们将第一时间删除或更改!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
2022-12-13 优雅的API接口设计
2022-12-13 对于async和await的使用同步、异步、顺序执行方式
2021-12-13 Win10原版 U盘安装盘制作和安装教程
2019-12-13 自定义基于 VLC 的视频播放器
2019-12-13 基于VLC库C#开发可播放摄像头及任意格式视频的播放器
2019-12-13 用vlc搭建简单流媒体服务器(UDP和TCP方式)
2019-12-13 javascript加载XML字符串或文件