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

一 . 背景及效果

当前互联网上传文件最多的就是图片文件了，但是传统web图片的截图上传需要：截图保存->选择路径->保存后再点击上传->选择路径->上传->插入。
图片文件上传也需要：选择路径再->上传->插入，步骤繁杂，互联网体验为王，如果支持截图粘贴上传、拖拽上传将大大提升体验。
当前知乎和github对现代浏览器均支持这两种特性，闲来无事就学习实现了一下，今天就说一说这个1kb插件实现什么功能，怎么使用和原理。

首先看一下插效果:

• 截图后直接粘贴上传。
  

• 拖拽上传
  

http网络

二.使用示例

直接调用：

<div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
<script type="text/javascript" src="UploadImage.js"></script>

  new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调
                    var img = new Image();
                    img.src = xhr.responseText;
                    this.appendChild(img);
                });

AMD/CMD

<div id="box" style="width: 800px; height: 400px; border: 1px solid;" contenteditable="true"></div>
            <script type="text/javascript" src="require.js"></script>
            <script>
                require(['UploadImage'], function (UploadImage) {

                    new UploadImage("box", "UploadHandler.ashx").upload(function (xhr) {//上传完成后的回调
                        var img = new Image();
                        img.src = xhr.responseText;
                        this.appendChild(img);
                    });

                })
            </script>

三.浏览器支持

当前版本只支持以下，浏览器，后期可能会支持更多浏览器。

• IE11
• Chrome
• FireFox
• Safari(未测式，理论应该支持)

四.原理及源码

1. 粘贴上传
   处理目标容器（id）的paste事件，读取e.clipboardData中的数据，如果是图片进行以下处理：
   用H5 File API(FileReader)获取文件的base64代码，并构建FormData异步上传。
2. 拖拽上传
   处理目标容器（id）的drop事件，读取e.dataTransfer.files（H5 File API: FileList）中的数据，如果是图片并构建FormData异步上传。

以下是初版本代码，比较简单。不再赘述。

部份核心代码

function UploadImage(id, url, key)
    {
        this.element = document.getElementById(id); 
        this.url = url; //后端处理图片的路径
        this.imgKey = key || "PasteAreaImgKey"; //提到到后端的name

    }
    UploadImage.prototype.paste = function (callback, formData) 
    {
        var thatthat = this;
        this.element.addEventListener('paste', function (e) {//处理目标容器（id）的paste事件

                if (e.clipboardData && e.clipboardData.items[0].type.indexOf('image') > -1) {
                    var that = this,
                        reader =  new FileReader();
                    file = e.clipboardData.items[0].getAsFile();//读取e.clipboardData中的数据：Blob对象

                    reader.onload = function (e) { //reader读取完成后，xhr上传
                        var xhr = new XMLHttpRequest(),
                            fd = formData || (new FormData());;
                        xhr.open('POST', thatthat.url, true);
                        xhr.onload = function () {
                            callback.call(that, xhr);
                        }
                        fd.append(thatthat.imgKey, this.result); // this.result得到图片的base64
                        xhr.send(fd);
                    }
                    reader.readAsDataURL(file);//获取base64编码
                }
            }, false);
    }

后端及详细代码请移步：github:https://github.com/etoah/ImgUploadJS

五. 其它功能

部份功能还在开发中，欢迎提建议或意见。

 

评论：

#1楼 2016-01-19 08:57 troy.cui
不错的，如果有那种多图上传的功能就好了

回复 引用 #2楼 [楼主] 2016-01-19 09:26 Lucien!
@ troy.cui
就是一下拖拽多个图上传么,后期可能会添加此功能.

回复 引用 #3楼 2016-01-19 09:44 EcitGis
mark

回复 引用 #4楼 2016-01-19 13:33 为之则易
不错，期待弄成一个基于HTML5的富文本编辑器

回复 引用 #5楼 [楼主] 2016-01-19 15:34 Lucien!
@ 为之则易
多谢支持,搞成markdown是不是更好.

回复 引用 #6楼 2016-01-19 16:17 #张志豪#
好文

回复 引用 #7楼 2016-01-19 23:17 freed
很棒！

回复 引用 #8楼 2016-01-20 09:17 julianking
不错，学习了

回复 引用 #9楼 2016-01-20 09:35 Yz's
不错 博客园就没这功能=- =

回复 引用 #10楼 2016-01-20 16:35 天命辉煌
不错，可以去看看WebUploader

回复 引用 #11楼 2019-10-10 10:09 梓萱IT民工
这个拖拽功能能否集成到kindEditor编辑器中？

回复 引用 #12楼 2019-10-10 10:16 爱晓俊
如何将拖拽功能集成到kindEditor编辑器中？

回复 引用 #13楼 2019-12-04 10:08 208小倩
你好，怎么实现复制图片（包括电脑系统里的、截图等等），粘贴（ctrl+v）直接上传给后台

 

出处：https://www.cnblogs.com/etoah/p/5140650.html