js & Input & Paste & Clipboard & upload & Image

js & Input & Paste & Clipboard & upload & Image

input paste upload image js

Clipboard_API

https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API

let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);

box.addEventListener("paste", function(event) {
    let items = (event.clipboardData || event.originalEvent.clipboardData).items;
    console.log(`clipboardData items: `, JSON.stringify(items, null, 4));
    // will give you the mime types
    for (const item of items) {
        // let item = items[i];
        if (item.kind === "file") {
            // let blob = item.getAsFile();
            // let url = window.URL.createObjectURL(blob);
            let blob = item.getAsFile();
            let reader = new FileReader();
            reader.onload = function(event) {
                console.log(`event.target.result =`, event.target.result);
                // data:image/png;base64,
                let img = document.createElement(`img`);
                img.src = event.target.result;
                img.setAttribute(`class`, `clearfix`);
                // img.class = ".clearfix";
                // img.class = "clearfix";
                img.style = "width: 30%; height: 30%;";
                // img.style = "width: 200px; height: 100px;";
                // textarea.appendChild(img);
                // textarea.insertAdjacentElement(`beforeend`, img);
                textarea.insertAdjacentElement(`afterend`, img);
            };
            // data url
            reader.readAsDataURL(blob);
        }
    }
});

type bug

// 单聊贴图发送
let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// document.addEventListener("paste", function (e) {
    log(`e =`, e);
    log(`e.clipboardData`, e.clipboardData);
    log(`e.clipboardData.types`, e.clipboardData.types);
    log(`e.clipboardData.items`, e.clipboardData.items);
    log(`e.clipboardData.items.length`, e.clipboardData.items.length);
    log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
    log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
                let blob = e.clipboardData.items[0].getAsFile();
                let url = window.URL.createObjectURL(blob);
                // preview
                let img = document.createElement(`img`);
                // img.src = event.target.result;
                img.src = url;
                img.setAttribute(`class`, `clearfix`);
                img.style = "width: 200px; height: 100px;";
                textarea.insertAdjacentElement(`afterend`, img);
                // preview
                let uid = conn.getUniqueId();
                // 生成本地消息id
                let msg = new WebIM.message("img", uid);
                // 创建图片 img 消息
                msg.set({
                    apiUrl: WebIM.config.apiURL,
                    file: {
                        data: blob,
                        url: url,
                    },
                    to: "test",
                    // to: "root",
                    // 接收消息对象
                    roomType: false,
                    // 单聊
                    onFileUploadError(err) {
                        log("Image Upload Error", err);
                    },
                    onFileUploadComplete(data) {
                        log("Image Upload Complete", data);
                    },
                    success(id) {
                        log("Image Upload Success", id);
                    },
                });
                conn.send(msg.body);
            }
        }
    }
});

OK

// 单聊贴图发送
let textarea = document.querySelector(`[data-box="box-textarea"]`);
let box = document.querySelector(`[data-input="text"]`);
box.addEventListener("paste", function (e) {
// document.addEventListener("paste", function (e) {
    log(`e =`, e);
    log(`e.clipboardData`, e.clipboardData);
    log(`e.clipboardData.types`, e.clipboardData.types);
    log(`e.clipboardData.items`, e.clipboardData.items);
    log(`e.clipboardData.items.length`, e.clipboardData.items.length);
    log(`e.clipboardData.items[0]`, e.clipboardData.items[0]);
    log(`e.clipboardData.items[1]`, e.clipboardData.items[1]);
    if (e.clipboardData && e.clipboardData.types) {
        if (e.clipboardData.items.length > 0) {
            // if (/^image\/\w+$/.test(e.clipboardData.items[0].type)) {
            //     let blob = e.clipboardData.items[0].getAsFile();
            if (/^image\/\w+$/.test(e.clipboardData.items[1].type)) {
                let blob = e.clipboardData.items[1].getAsFile();
                let url = window.URL.createObjectURL(blob);
                // preview
                let img = document.createElement(`img`);
                // img.src = event.target.result;
                img.src = url;
                img.setAttribute(`class`, `clearfix`);
                img.style = "width: 200px; height: 100px;";
                textarea.insertAdjacentElement(`afterend`, img);
                // preview
                let uid = conn.getUniqueId();
                // 生成本地消息id
                let msg = new WebIM.message("img", uid);
                // 创建图片 img 消息
                msg.set({
                    apiUrl: WebIM.config.apiURL,
                    file: {
                        data: blob,
                        url: url,
                    },
                    to: "test",
                    // to: "root",
                    // 接收消息对象
                    roomType: false,
                    // 单聊
                    onFileUploadError(err) {
                        log("Image Upload Error", err);
                    },
                    onFileUploadComplete(data) {
                        log("Image Upload Complete", data);
                    },
                    success(id) {
                        log("Image Upload Success", id);
                    },
                });
                conn.send(msg.body);
            }
        }
    }
});

---

ClipboardEvent

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent

clipboardData

https://developer.mozilla.org/en-US/docs/Web/API/ClipboardEvent/clipboardData

https://caniuse.com/#search=clipboardData

https://caniuse.com/#search=execCommand

https://codepen.io/netsi1964/pen/IoJbg

https://stackoverflow.com/questions/6333814/how-does-the-paste-image-from-clipboard-functionality-work-in-gmail-and-google-c

https://stackoverflow.com/questions/50427513/html-paste-clipboard-image-to-file-input

https://mobiarch.wordpress.com/2013/09/25/upload-image-by-copy-and-paste/

https://stackoverflow.com/questions/490908/paste-an-image-from-clipboard-using-javascript/4400761

refs

---

---

xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---