html页面中div+javascript实现粘贴

最新推荐文章于 2023-07-06 14:24:46 发布

weixin_34240657

最新推荐文章于 2023-07-06 14:24:46 发布

阅读量160

点赞数

文章标签： javascript python java ViewUI

原文链接：https://my.oschina.net/u/1054538/blog/604107

版权

2019独角兽企业重金招聘Python工程师标准>>>

<%@ page language="java" contentType="text/html; charset=GB18030"

pageEncoding="GB18030"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

html,body{

height: 100%;

}

#textView{

width: 99%;

height: 99%;

border: 1px solid #ddd;

outline: 1px;

outline-color: red;

padding: 5px;

overflow-y: auto;

}

</style>

</head>

<body>

</div>

var text = document.getElementById("textView");

text.addEventListener("paste", function(event){

var clipboardData = event.clipboardData;

var file, reader;

Array.prototype.forEach.call(clipboardData.types, function(type, i){

var item = clipboardData.items[i];

var imageType = /image\/(png|jpg|webp|gif|bmp)/i;

//console.log(type, item.type, 'type');

if(type.match(imageType) || item.type.match(imageType)){

file = item.getAsFile();

reader = new FileReader();

reader.onload = function(evt){

console.log('result: ', evt, evt.target, evt.target.result);

var image = new Image();

image.src = evt.target.result;

text.appendChild(image);

};

reader.readAsDataURL(file);

}

});

}, false);

</script>

</body>

</html>

转载于:https://my.oschina.net/u/1054538/blog/604107

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34240657

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html页面中div+javascript实现粘贴

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫

用div实现编辑器的功能，可ctrl+c使用ctrl+v粘贴进去

qq_41020757的博客

03-09

718

废话不多说，直接上代码吧，自己封装的一个小组件，主要是利用contentEditable="true"属性设置div可编辑啊，可以复制文字，图片什么的，我这边是做了样式的处理，返回值是一个dom字符串。代码如下，不懂的留言： import React from 'react'; import { connect } from 'react-redux'; import moment from 'moment'; import PropTypes from 'prop-types'; import { f

html5 复制粘贴,H5 复制粘贴 - execCommand

weixin_34162253的博客

06-17

166

需求:自动复制一段内容到剪切板, 让用户可以在其他客户端粘贴(发小广告做推广经常要用吧)window.clipboardData (IE 才有)是个很好用的对象, 但是只在 IE 才有,IE 被吐糟了一万年, 才发现他有个不错的地方.IE 即将退出历史, 找点其他的吧.是一个不错选择, 但是他还是借助的 flash 实现的本人讨厌 Flash, 弃之.window.prompt这个还是算了吧, ...

参与评论您还未登录，请先登录后发表或查看评论

html 右键复制功能实现

young_sam的博客

07-05

752

/ selection对象重构了toSring()方法，获取selection对象的选中内容。// 通过copy事件监听，阻止将选中内容复制到系统剪切板上。'转载请联系作者，内容地址：xxxxx'// 把重写后的内容写入到剪贴板。// 获取选中内容对象。

vue实现指定div右键显示菜单，并实现复制内容到粘贴板

weixin_42966151的博客

07-06

907

【代码】vue实现指定div右键显示菜单，并实现复制内容到粘贴板。

可编辑的div黏贴图片

山外小楼

08-26

438

黏贴图片主要分为2个情况，第一个是直接截图或者打开图片后点击复制，第二个是直接使用ctrl+c复制电脑本地图片，今天主要是写一下ctrl+c复制电脑本地图片的方法通过使用ctrl+c复制电脑本地图片在粘贴板里面是保存的file文件类型所以直接ctrl+v 是无法复制出来，这就需要我们将file类型的img 转化成blob类型，具体方法如下。将此函数绑定到onPaste 黏贴事件 const getItem = async (event) => { let items =.

JavaScript将页面表格导出为Excel的具体实现

10-26

在本文中，我们将探讨如何使用JavaScript将页面上的表格数据导出为Excel文件，这是一种常见的需求，有助于用户方便地管理和存储网页中的数据。在实现这个功能时，我们通常依赖于浏览器提供的特定API或库，比如...

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

12-13

使用ImgUploadJS插件十分简单，只需在HTML页面中引入插件脚本，并实例化UploadImage对象，指定上传区域ID和服务器处理图片的URL。例如： ```html <div id="box" style="width: 800px; height: 400px; border: 1px ...

我的学校网页期末作业（纯html+css实现）

08-10

2. **布局与样式**：所有示例均使用 DIV+CSS 布局，确保页面的整洁性和易读性。此外，颜色搭配和字体大小等方面也经过精心设计，使得整体视觉效果更加出色。 3. **多媒体元素**：部分示例中包含了 GIF 图像、视频和...

用javascript实现的激活输入框后隐藏初始内容

10-30

在本例中，我们将使用JavaScript来实现这一功能。首先，我们需要理解HTML结构。这里有两个输入框，一个用于电子邮件（email），另一个用于密码（pwd）。每个输入框都有`onfocus`和`onblur`事件处理程序，这两个...

jq+layui 实现图片拖拽上传功能

02-28

首先，我们需要在HTML页面中设置基本结构。`index.html`文件通常会包含`<head>`部分引入jQuery和Layui的CDN链接，以及自定义的JavaScript文件。例如： ```html <!DOCTYPE html> <html> 图片拖拽上传 ...

前端js实现粘贴图片到可编辑的div(其他标签也可)中

Miss_Liang的博客

06-05

9213

前端js实现粘贴图片到可编辑的div中去，实现原理是监听div容器的paste事件，对事件中粘贴过来的数据进行分析，若是图片则使用formdata将图片转换成二进制流，使用ajax传给后端，后端将图片存到服务器并返回一个图片在服务器中的地址，在ajax的success事件中动态创建img标签，将返回的地址赋值给img标签，并将标签添加至div标签中即可实现粘贴图片至可编辑的div中去。

关于div可编辑的复制粘贴问题

weixin_34144848的博客

01-09

665

1 todoFilter(e) { 2 e.preventDefault(); 3 if (!e.target.getAttribute('contenteditable')) { 4 return; 5 } 6 ...

HTML+JS实现复制粘贴

April_519的博客

10-23

2917

HTML+JS实现网页和手机端复制粘贴 直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>一键复制</title> </head> <body> <input readonly type="...

可编辑div 粘贴带html,javascript – 只将纯文本粘贴到可编辑的div中

weixin_39524741的博客

06-10

346

我需要能够允许用户粘贴到可编辑的div(通过用户选择的任何东西：右键单击并粘贴,快捷键等),但我想丢弃格式并只采用纯文本.我不能使用textarea,因为如果由用户启动的事件应用,div将允许基本格式(粗体和斜体).onbeforepaste事件看起来很有希望,但根据quirksmode,支持是如此有限,以至于无法使用.tyia任何建议解决方法:这很棘手,但并非不可能.您可以做的是非常复杂,并且可...

html div纯文本粘贴,百度Ueditor纯文本粘贴规则及上传附件链接从新窗口打开等问题（用JQ解决）...

weixin_32042331的博客

06-16

423

一、关于百度Ueditor编辑器，纯文本粘贴一些规则的记录：,pasteplain:true//是否默认为纯文本粘贴。false为不使用纯文本粘贴，true为使用纯文本粘贴//纯文本粘贴模式下的过滤规则,'filterTxtRules':function(){functiontransP(node){node.tagName='p';node.setStyle();}return{...

html js实现粘贴图片上传

最新发布

07-08

要实现粘贴图片上传，你可以使用HTML和JavaScript来。下面是一个简单的示例代码： HTML部分： ```html <div id="drop-area"> <div class="drop-message">将图片拖到此处或点击选择图片</div> </div> ``` CSS部分： ```css #drop-area { width: 300px; height: 200px; border: 2px dashed #ccc; text-align: center; padding: 40px; margin: 20px auto; } .drop-message { font-size: 18px; color: #999; } #drop-area.dragover { border-color: #000; } ``` JavaScript部分： ```javascript // 获取相关的元素 var dropArea = document.getElementById('drop-area'); // 阻止默认的拖拽事件 ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, preventDefaults, false); }); function preventDefaults(e) { e.preventDefault(); e.stopPropagation(); } // 添加拖拽样式 ['dragenter', 'dragover'].forEach(eventName => { dropArea.addEventListener(eventName, highlight, false); }); ['dragleave', 'drop'].forEach(eventName => { dropArea.addEventListener(eventName, unhighlight, false); }); function highlight(e) { dropArea.classList.add('dragover'); } function unhighlight(e) { dropArea.classList.remove('dragover'); } // 处理粘贴事件 document.addEventListener('paste', handlePaste, false); function handlePaste(e) { var items = e.clipboardData.items; for (var i = 0; i < items.length; i++) { if (items[i].type.indexOf('image') !== -1) { var file = items[i].getAsFile(); uploadFile(file); } } } // 处理文件上传 dropArea.addEventListener('drop', handleDrop, false); function handleDrop(e) { var files = e.dataTransfer.files; handleFiles(files); } function handleFiles(files) { for (var i = 0; i < files.length; i++) { uploadFile(files[i]); } } function uploadFile(file) { var formData = new FormData(); formData.append('file', file); // 在这里执行上传文件的逻辑，例如使用Ajax发送formData到服务器 // 这里只是一个简单的示例，你需要根据实际情况进行修改 var xhr = new XMLHttpRequest(); xhr.open('POST', '/upload', true); xhr.onload = function() { if (xhr.status === 200) { console.log('文件上传成功！'); } else { console.error('文件上传失败！'); } }; xhr.send(formData); } ``` 以上代码实现了一个简单的粘贴图片上传的功能。当用户将图片拖拽到指定区域时，或者通过粘贴方式插入图片时，会触发对应的事件处理函数。你可以根据实际需求进行修改和扩展。请注意，粘贴图片上传功能在某些浏览器中可能不被支持或受到限制。