javascript - 拖放 Html 5 文件上传 - 防止加载

Question

到目前为止我有这段代码。我可以看到 dragenter 和 dragleave 事件，但是当我放下文件，即使 preventDefault() 被调用，浏览器(Chrome 或 Firefox)也只是打开文件(一张图片)。有人看到任何错误吗？我应该改变什么？

 <script type="text/javascript">
    $(function () {
        var $box = $("#ulbox");
        $box.bind("dragenter", dragEnter);

        $box.bind("dragleave", dragLeave);
        $box.bind("drop", drop);

        function dragEnter(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            console.log("dragEnter...");
            $(evt.target).addClass('over');
            return false;
        }
        function dragLeave(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            console.log("drag leave...");
            $(evt.target).removeClass('over');
            return false;
        }


        function drop(evt) {
            evt.stopPropagation();
            evt.preventDefault();
            $(evt.target).removeClass('over');

            var files = evt.originalEvent.dataTransfer.files;

            if (files.length > 0) {
                alert("dropped");
                if (window.FormData !== undefined) {
                    var data = new FormData();
                    for (i = 0; i < files.length; i++) {
                        data.append("file" + i, files[i]);
                    }

                    $.ajax({
                        type: "POST",
                        url: "/api/upload",
                        contentType: false,
                        processData: false,
                        data: data,
                        success: function (res) {
                        }
                    });
                } else {
                    alert("browser sucks!");
                }
            }
            return false;
        }
         });
    </script>
 }

 <div id="ulbox" style="border: 5px dashed black; width: 300px; height: 100px;">
 </div>

Answer 1

移除$box.bind("dragleave", dragLeave);

添加这个:$box.bind("dragover", dragLeave);

它很有魅力。