h5-api-图片拖拽 

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            #box{
                width:100%;
                height:400px;
                background:#eee;
                margin:10px 0px;
            }
            #box img{
                margin:5px;
                max-height: 150px;
            }
            .over{
                border:2px dashed #ccc;
                transform: scale(0.9, 0.9);
            }
        </style>
    </head>
    <body>
        <h3>请把文件夹中的图片拖到下面区域</h3>
        <div id="box"></div>
    <script>        
            //获取目标元素
            var box = document.querySelector("#box");

            //给目标元素绑定事件
            box.addEventListener("dragenter", function(){
                this.classList.add('over');
            }, false);

            box.addEventListener("dragleave", function(){
                this.classList.remove("over");
            }, false);

            box.addEventListener("dragover", function(e){
                e.preventDefault();
            }, false);

            box.addEventListener("drop", function(e){
                e.preventDefault(); 

                //遍历FileList
                [].forEach.call(e.dataTransfer.files, function(itemFile){
                    //读取文件
                    readImage(itemFile);
                })

                this.classList.remove("over");  
            },false);
            function readImage(fileObj) {
                var frObj = new FileReader();
                frObj.onload = function(){
                    var img = document.createElement("img");
                    img.src = frObj.result;
                    document.querySelector("#box").appendChild(img);
                }
                frObj.readAsDataURL(fileObj);
            }   
        </script>
    </body>
    </html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容