master

分支 (1)

管理

管理

master

tool-box
/
copyPic.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粘贴图片</title>
    <script src="./js/utils.js"></script>
    <style type='text/css'>
        * {
            margin: 0;
            padding: 0;
            text-align: center;
        }
        div {
            width: 500px;
            height: 500px;
            border: 1px solid;
        }
        .img {
            width: auto;
            height: 100%;
            max-width: 100%;
        }
    </style>
</head>
<body>
    <div id="past-contener">
    </div>
    <script>
        const el = document.getElementById('past-contener');
        //此事件监听也可以添加在document上，该事件会有冒泡行为，则本页面上任何地方的粘贴操作都会触发
        el.addEventListener('paste', function(e){
            let file = null;
            const items = (e.clipboardData || window.clipboardData).items;
            if (items && items.length) {
                for (var i = 0; i < items.length; i++) {
                if (items[i].type.indexOf('image') !== -1) {
                    file = items[i].getAsFile();
                    break;
                }
                }
            }
            console.log(file, 'file')
            if (file) {
                var reader = new FileReader()
                reader.onload = function(event) {
                    // event.target.result就是图片的Base64地址啦
                    let img = document.createElement('img');
                    img.src = event.target.result;
                    el.appendChild(img);
                }
                reader.readAsDataURL(file);
                // console.log(file);
                // 此时获取到file文件对象，即可处理上传相关处理
            }
        });

    </script>
</body>
</html>