开源地址：https://github.com/yuezhongxin/paste-upload-image.js

支持 Ctrl+C/Ctrl+V 上传，支持拖拽上传，也支持 QQ/微信截图上传。

textarea使用（返回markdown格式的图片）：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script src="scripts/jquery.js"></script>

    <script src="scripts/paste-upload-image.js"></script>

</head>

<body>

    <textarea name="txtContent" id="txtContent" style="width:500px;height:200px;"></textarea>

    <script>

        $("#txtContent").pasteUploadImage();//bind textarea

    </script>

</body>

</html>

tinyMCE使用：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <meta charset="utf-8" />

    <script src="scripts/jquery.js"></script>

    <script src="tinymce/tinymce.js"></script>

</head>

<body>

    <textarea name="mceContent" id="mceContent"></textarea>

    <script>

        $("#txtContent").pasteUploadImage();

        tinymce.init({

            selector: '#mceContent',

            height: 500,

            plugins: [

              'pasteUpload', //add pasteUpload plugin

              'advlist autolink lists link image charmap print preview anchor',

              'searchreplace visualblocks code fullscreen',

              'insertdatetime media table contextmenu code'

            ],

            toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',

            content_css: [

              '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',

              '//www.tinymce.com/css/codepen.min.css'

            ]

        });

    </script>

</body>

</html>

后端处理：

public class ImageUploaderController : Controller

{

    [AllowCors("sub.example.com")]//跨域访问

    [HttpPost]

    public async Task<string> ProcessPasteUpload(HttpPostedFileBase imageFile, string mimeType)

    {

        ///to do...

    }

}

public class AllowCorsAttribute : ActionFilterAttribute

{

    private string[] _domains;

    public AllowCorsAttribute(string domain)

    {

        _domains = new string[] { domain };

    }

    public AllowCorsAttribute(string[] domains)

    {

        _domains = domains;

    }

    public override void OnActionExecuting(ActionExecutingContext filterContext)

    {

        var context = filterContext.RequestContext.HttpContext;

        var host = context.Request.UrlReferrer?.Host;

        if (host != null && _domains.Contains(host))

        {

            context.Response.AddHeader("Access-Control-Allow-Origin", $"http://{host}");

            context.Response.AddHeader("Access-Control-Allow-Credentials", "true");

        }

        base.OnActionExecuting(filterContext);

    }

}

效果展示：

JQuery 复制粘贴上传图片插件（textarea 和 tinyMCE）的更多相关文章

  1. 原生js复制粘贴上传图片前后台代码，兼容firebox，chrome， ie11，亲测有效

    需求:粘贴上传图片,截图工具,右键粘贴,或者ctrl+v粘贴 方法1:可直接套用富文本框的图片上传功能,完成复制粘贴 缺点:麻烦,样式难控制 方法2:用原生js完成,以下案例基于此,样式请自己动手调整 ...

  2. 复制粘贴之插件（jquery.zclip.min.js）需要安装flash

    .line{margin-bottom:20px;} /* 复制提示 */ .copy-tips{position:fixed;z-index:999;bottom:50%;left:50%;marg ...

  3. 复制粘贴之插件（clipboard.min.js）不需要安装flash

    <!DOCTYPE html> <html> <head> <title>ZeroClipboard Test</title> <me ...

  4. 锋利的jQuery复制粘贴（一）

    两者区别:$(document).ready();网页中多有dom结构绘制完毕后就执行, 可能dom元素关联的东西没用加载完.[若有多个弹框,均可以执行输出] window.onload 必须等待多有 ...

  5. 同时绑定onpropertychange 和 oninput 事件，实时检测 input、textarea输入改变事件，支持低版本IE，支持复制粘贴

    实时检测 input.textarea输入改变事件,支持低版本IE,支持复制粘贴 检测input.textarea输入改变事件有以下几种: 1.onkeyup/onkeydown 捕获用户键盘输入事件 ...

  6. ClipboardJS复制粘贴插件的使用

    1.简单的纯JS复制粘贴(兼容性差,只能用textarea标签) var btn=document.getElementsByClassName("btn")[0]; //复制按钮 ...

  7. textarea还剩余字数统计，支持复制粘贴的时候统计字数

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. jQuery event的复制粘贴的坑

    jQuery为了兼容性会把系统暴露出来的event重新整理一遍,但是复制粘贴的event就被丢掉了. 所以要在所有原生浏览器想实现复制粘贴,大家都用flash实现了.其实只要用原生的方法捕获事件就ok ...

  9. JQuery Mobile - html5+CSS 禁止IOS长按复制粘贴实现

    因为在移动端APP需要实现长按执行别的事件,但是在IOS系统有默认的长按选择复制粘贴,禁止此功能在网上找了很多资料,最终整理出目前最好的解决方法.实际测试,也并不是很理想,但是可能没有更好办法了! / ...

随机推荐

  1. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  2. Syscan360会议胸牌破解揭秘

    Syscan360会议胸牌破解揭秘 背景 有幸参加今年11月份的上海Syscan360安全会议,会议期间有一个亮点就是360的独角兽团队设计了一款电子badge(胸牌)供参加人员进行破解尝试,类似于美 ...

  3. clr 元数据

    clr相关编译器编译生成的托管模块由四部分组成:PE32或32+头.clr头.元数据.IL代码. 元数据和IL代码完全对应,保持一致(:>)性. 元数据有很多用途: VS的智能感知,自动补全: ...

  4. PayPal高级工程总监：读完这100篇论文 就能成大数据高手（附论文下载）

    100 open source Big Data architecture papers for data professionals. 读完这100篇论文 就能成大数据高手 作者 白宁超 2016年 ...

  5. java设计模式之--单例模式

    前言:最近看完<java多线程编程核心技术>一书后,对第六章的单例模式和多线程这章颇有兴趣,我知道我看完书还是记不住多少的,写篇博客记录自己所学的只是还是很有必要的,学习贵在坚持. 单例模 ...

  6. ABP创建数据库操作步骤

    1 ABP创建数据库操作步骤 1.1 SimpleTaskSystem.Web项目中的Web.config文件修改数据库配置. <add name="Default" pro ...

  7. ubuntu15 coreclr

    看了很多文章心里痒痒,也下载个ubuntu想发布个asp.net5试试,自然是下载的最新版本15.结果涉及dnu restore,dnx...什么的都没反应,切换为mono就正常,奇怪了,按说core ...

  8. Hadoop单机模式配置

    Required Software 1. 安装Java环境推荐的版本在链接中有介绍HadoopJavaVersions. 2. 安装ssh以使用hadoop脚本管理远程Hadoop daemons. ...

  9. SSH隧道应用, 突破网络限制

    文/怡文圣美 这篇文章可以帮你解决下面三个问题: 不能直连服务器, 要先登陆跳板机, 造成客户端工具无法连接服务器. 服务器没有公网IP, 且只允许公司IP访问, 要在家里操作要先远程桌面到工作机再登 ...

  10. SQL Server 服务器磁盘测试之SQLIO篇（二）

    上次放出了一篇文章,针对磁盘卷簇大小默认4KB和自定义64KB进行了测试,测试内容为随机和顺序读写,大小为8KB和64KB,有人觉得这并没有照顾到SQL Server所有的IO使用情景.这篇测试文章, ...