Question

根据MDN Using files from web applications 我可以使用拖放来上传图像，如果我是正确的理解，请在页面上获取该图像。

所以我接受了那段代码 HTML：

<html>
    <head>
        <title></title>
    </head>
<style>
    .box{
        width:200px;
        height: 200px;
        background-color: lightgray;
    }

</style>

<body>
<div class="box" id="dropbox">drop here</div>
<div id="qq"></div>
</body>
</html>

最后<div>之后的javascript：

<script>
        var dropbox;

        dropbox = document.getElementById("dropbox");
        dropbox.addEventListener("dragover", dragover, false);
        dropbox.addEventListener("drop", drop, false);

        function dragover(e) {
            e.preventDefault();
        }

        function drop(e) {
            e.preventDefault();

            var dt = e.dataTransfer.files;

            function handleFiles(files){

                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
                    var imageType = /^image\//;

                    if (!imageType.test(file.type)) {
                      continue;
                    }

                    var img = document.createElement("img");
                    // img.classList.add("obj");
                    img.file = file;
                    var qq = document.getElementById("qq");
                    qq.appendChild(img); 

                    var reader = new FileReader();
                    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
                    reader.readAsDataURL(file);
                }
            }
        }    
</script>

页面上没有图像。我做错了什么？

通过拖放在页面上的图像

0 个答案: