拖拽图片

<div id="box">请拖入文件</div>

box.ondragover = function () {

            console.log(666);

            event.preventDefault();
            this.style.opacity = .5;

        }

  


        // 拖拽出去

        box.ondragleave = function () {

            this.style.opacity = 1;

        }

  
  


        // 拖拽后放下

        box.ondrop = function () {

            event.preventDefault();

            this.style.opacity = 1;

  


            console.log(event.dataTransfer.files);

  


            // 单个文件

  


            // // 通过file对象，可以创建一个临时地址

            // var url = URL.createObjectURL(event.dataTransfer.files[0]);

            // console.log(url);

            // var img = document.createElement('img');

            // img.src = url;

            // document.body.appendChild(img);

  
  


            // 通过file对象，读取出来file对象的base64

            // var reader = new FileReader();

            // reader.readAsDataURL(event.dataTransfer.files[0]);

            // reader.onload = function () {

            //     console.log(this.result);

  


            //     var img = document.createElement('img');

            //     img.src = this.result;

            //     document.body.appendChild(img);

            // }

  
  


            // 多个文件

            for (let i = 0; i < event.dataTransfer.files.length; i++) {

                var reader = new FileReader();

                console.log(reader);

                reader.readAsDataURL(event.dataTransfer.files[i]);

                reader.onload = function () {

                    console.log(this.result);

  
                    var img = document.createElement('img');

                    img.src = this.result;

                    document.body.appendChild(img);

                }

            }

        }