h5实现从 pc/mac 桌面拖入浏览器html指定容器

请将桌面上的图片拖入此demo中 demo演示

chrome 开发者工具快捷键: cmd+option+i

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #box{
            width: 400px;
            height: 400px;
            border:1px solid green;
        }
    </style>
</head>
<body>
    <h3>html5图片拖拽demo</h3>
    <div id="box" contenteditable="true">
    </div>
    <button class="send">将markdown文本发送给后台server: 请通过控制台查看dom节点</button>
    <div class="content"></div>
    <script type="text/javascript">
        // 浏览器文件拖入事件
        ondragover = function(e){
            e.preventDefault();
        }
        ondrop = function(e){
            e.preventDefault();
            let file = e.dataTransfer.files[0];
            let fr = new FileReader();
            fr.readAsDataURL(file);
            fr.onload = function(e){
                let img = new Image();
                img.src = this.result;
                document.getElementById("box").appendChild(img)//将图片拖到指定容器内
            }
        }
        document.querySelector('.send').addEventListener('click',function(){
            var content = document.getElementById('box')
            console.log(content)
            // document.querySelector('.content').innerHTML=content
        })
    </script>
</body>
</html>

接下来就可以搞事情了，撸个markdown

results matching ""

    No results matching ""