文件粘贴直接上传

Question

怎么能实现复制文件，粘贴的时候直接就上传，或者有什么插件能实现呢？

Answer 1

可以参考这个网站的实现 : https://www.pastefile.com/ 可以将clipboard的图片上传.

前端没有加密的，参考实现应该不难。

核心代码 paste.js

(function ($) {
    'use strict';

    var readImagesFromEditable = function (element, callback) {
        setTimeout(function () {
            $(element).find('img').each(function (i, img) {
                getImageData(img.src, callback);
            });
        }, 1);
    };

    var getImageData = function (src, callback) {
        var loader = new Image();

        loader.onload = function () {
            var canvas = document.createElement('canvas');
            canvas.width = loader.width;
            canvas.height = loader.height;

            var context = canvas.getContext('2d');
            context.drawImage(loader, 0, 0, canvas.width, canvas.height);

            try {
                var dataURL = canvas.toDataURL('image/png');
                if (dataURL) {
                    callback({
                        dataURL: dataURL
                    });
                }
            } catch (err) {}
        };

        loader.src = src;
    };

    $.paste = function () {

        var handler = function (e) {

            var pasteBoard = $(this);

            var trigger = function (event, data) {
                
                if (arguments.length > 1)
                    return pasteBoard.trigger(event, data);

                return function (data) {
                    return pasteBoard.trigger(event, data);
                };
            };

            var clipboardData, text;

            if (e.originalEvent) {
                clipboardData = e.originalEvent.clipboardData;

                if (clipboardData.items) {
                    var items = clipboardData.items;

                    // Copy-paste on OSX
                    if (items.length === 2) {

                        // If a user pastes image data, there are 2 items: the file name (at index 0) and the file (at index 1)
                        // but if the user pastes plain text or HTML, /index 0/ is the data with markup and /index 1/ is the plain, unadorned text.

                        if (items[0].kind === 'string' && items[1].kind === 'file' && items[1].type.match(/^image/)) {

                            // If the user copied a file from Finder (OS X) and pasted it in the window, this is the result. This is also the result if a user takes a screenshot and pastes it.
                            // Unfortunately, you can't copy & paste a file from the desktop. It just returns the file's icon image data & filename (on OS X).

                        } else if (items[0].kind === 'string' && items[1].kind === 'string') {

                            // Get the plain text
                            items[0].getAsString(trigger('pasteText'));

                        }

                    } else {

                        var item = items[0];

                        if (!item) return;
                        
                        if (item.type.match(/^image\//)) {

                            trigger('pasteImage', item.getAsFile());

                        } else if (item.type === 'text/plain') {

                            item.getAsString(trigger('pasteText'));

                        }
                    }

                } else {

                    if (clipboardData.types.length) {
                        text = clipboardData.getData('Text');
                        trigger('pasteText', text);
                    } else {
                        readImagesFromEditable(pasteBoard, trigger('pasteImage'));
                    }
                }

            } else if ((clipboardData = window.clipboardData)) {

                text = clipboardData.getData('Text');
                if (text) {
                    trigger('pasteText', text);
                } else {
                    readImagesFromEditable(pasteBoard, trigger('pasteImage'));
                }
            }

            setTimeout(function() {
                pasteBoard.empty();
            }, 1);
        };

        return $('<div/>')
            .prop('contentEditable', true)
            .css({
                width: 1,
                height: 1,
                position: 'fixed',
                left: -10000,
                overflow: 'hidden'
            })
            .on('paste', handler);
    };

})(jQuery);