使用paste事件，从excel表格中复制图片到网页上

最新推荐文章于 2022-01-12 18:40:13 发布

最新推荐文章于 2022-01-12 18:40:13 发布 · 398 阅读

本文介绍如何使用ExtJS框架实现在网页上直接从Excel或其他网页复制并粘贴图片的功能。通过监听paste事件并利用Blob数据格式，可以实现图片的即时上传与自定义命名。

使用paste事件，从excel表格中复制图片到网页上，其实也可以其他的网页的，复制图片。以下是Extjs代码：

Ext.EventManager.addListener(Ext.getBody(), "paste", this.onPaste, this);

onPaste的实现

onPaste: function (e) {
        e.stopPropagation();
        e.preventDefault();

        var ext = this.owner.explorer.selNode.attributes.ext;
        var app = Weoso.ApplicationTypes[ext];

        if (!app || !app.imageUploadType) {
            return;
        }

        var k=0;

        var items = e.browserEvent.clipboardData.items;
        var files = [];
        var f;
        for (var i = 0; i < items.length; ++i) {
            if (items[i].kind == 'file' &&
                items[i].type.indexOf('image/') !== -1) {
                f = items[i].getAsFile();
                f.name = "." + items[i].type.substring(6).toLowerCase();
                files.push(f);
                break;
            }
        }
        if (files.length) {
            Ext.MessageBox.show({
                title: "weOSo",
                msg: "请输入该图片对应的名称（区分大小写）",
                buttons: Ext.MessageBox.OKCANCEL,
                fn: function (e, text) {
                    if(e=="ok"){
                        this.uploader.show();
                        f.name = text+ f.name;
                        this.uploader.invokeUploader(files, app.imageUploadType);
                    }
                },
                minWidth: Ext.MessageBox.minPromptWidth,
                scope: this,
                prompt: true
            });
        }

    }

此时就可以得到复制图片的Blob模式的数据。

在结合http://openxtiger.iteye.com/blog/1830800 这个文章，就即可实现图片上传。

注意：因为Blob文件类型的文件名默认为：blob，如果要将图片设置为自己文件名，可在FormData的append的每三个参数传入：

void append(DOMString name, Blob value, optional DOMString filename);