簡體   English   中英

從剪貼板上傳文件(僅限客戶端)

[英]Upload file from clipboard (client side only)

我正在維護一個現有的應用程序(無法更改服務器端代碼,只能更改客戶端js )並被要求添加從剪貼板上傳文件的功能。
目前有一個標准的文件選擇表格

<form id="file_form" name="file_form" enctype="multipart/form-data" method="post" action="/upload">
        <label for="selector">
            File Location
        </label>
        <input type="file" id="selector" name="selector" title="Choose file">
        <input type="submit" id="submit" value="ОК">
        <input type="button" id="cancel" onclick="cancel()" value="Cancel">
</form>

所以我需要的是一種用剪貼板中的文件填充input#selector的方法。 我不需要進度條、預覽、圖像裁剪等...盡可能簡單,但請記住,我無法更改服務器上的任何內容。

是否有適用於 Chrome、FF 和 IE 的解決方案?

我在 google 上搜索的大多數東西要么充滿了過多的功能,需要大量外部 js 或服務器端代碼更改,要么在 Chrome 以外的任何地方都不起作用......

你可以參考這個網站: https : //www.pastefile.com

核心代碼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);

這並不難理解。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM