Question

我创建了一个页面，用户可以将文件从Windows资源管理器拖到浏览器中。只有在重新安装Chrome时，拖动功能才会开始起作用。但是当我重新启动浏览器时，它又停止了工作。当我尝试将文件拖入浏览器时，我看到黑色划掉的圆圈。

由于我的代码在重新安装chrome后工作，直到我重新启动，可能是浏览器设置问题而不是代码问题。

有谁知道为什么会发生这种情况？在Firefox中也会发生同样的事情。

这是我的代码（请注意，此代码位于iframe中）：

<!DOCTYPE html>
<html>
<head runat="server">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="../Scripts/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../Scripts/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../Scripts/utilities.js"></script>
</head>
<script>
    var selectedFiles;

    $(document).ready(function () {
        if (window.FileReader) {
            var box = document.getElementById("FilesList");
            box.addEventListener("dragenter", OnDragEnter, false);
            box.addEventListener("dragover", OnDragOver, false);
            box.addEventListener("drop", OnDrop, false);
        } 
    });

    function OnDragEnter(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function OnDragOver(e) {
        e.stopPropagation();
        e.preventDefault();
    }

    function OnDrop(e) {
        e.stopPropagation();
        e.preventDefault();
        selectedFiles = e.dataTransfer.files;
        uploadFiles();
    }

    function uploadFiles() {
        var data = new FormData();
        data.append('ObjectId', '<%= ObjectId %>');

        for (var i = 0; i < selectedFiles.length; i++) {
            data.append(selectedFiles[i].name, selectedFiles[i]);
        }

        $.ajax({
            type: 'POST',
            url: 'WebHandlers/MultipleFilesUploadHandler.ashx',
            contentType: false,
            processData: false,
            data: data,
            success: function (result) {
                alert('ok');
            },
            error: function () {
                alert('error');
            }
        });
    };
</script>
<body>
    <form id="form1" runat="server">
        <div id="FilesList" draggable="true" style="
            background-color: #D6D4D6; 
            height: 150px; 
            width: 300px;
            line-height: 150px;
            text-align: center;
            font-family: tahoma;                        
        ">
            drag here
        </div>
    </form>
</body>
<script type="text/javascript">
    hideWithZindex(["#lbPageLoadingPanel_LD", "#lbPageLoadingPanel"], parent.document);
</script>
</html>

重启浏览器后html5拖放不起作用

0 个答案: