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

Question

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

 <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);

它很有魅力。