整页拖放文件网站答案

【问题标题】：full page drag and drop files website整页拖放文件网站
【发布时间】：2013-11-07 16:52:28
【问题描述】：

我正在尝试获得与 dropbox 类似的拖放功能。我想尽可能使用基本的网络组件/编码来实现这一点。 HTML 或 HTML5 最好。这是为了原型，所以越快越好。这是我想要实现的目标：

1) 用户应该能够将文件从他们的计算机拖放到网页上的任何位置。 2) 当一个项目被拖到它上面时，网页本身应该显示一些指示符（即：突出显示或颜色叠加）。

我看过几个示例的代码 sn-ps，但它们都仅限于将已经在屏幕上的容器放到其他容器中，而不是将太多文件放到网页中。

由于这将是一个演示，因此不需要将拖放的文件上传到任何地方。

任何人都有一些可以让我前进的代码 sn-ps。

【问题讨论】：

你有什么尝试吗？
是的，我做到了。请看下面的答案。很抱歉没有在问题中提供更多详细信息。
好的。请将其添加到问题中。

标签： html drag-and-drop

【解决方案1】：

基本思路是这样的：

默认隐藏放置区。
将处理程序附加到html 元素，当在页面上拖动某些内容时，该处理程序将显示该区域。
当区域可见时，点击其事件以处理拖放操作。
当鼠标离开该区域时，将其隐藏。

这是对我有用的代码：https://jsfiddle.net/oL2akhtz/。

HTML5 规范的这一部分有点奇怪。需要牢记的最重要的事情是：

有四个有趣的事件：dragenter 在我们拖动某些东西并进入元素边界时触发； dragover 在我们将某些东西拖到元素上时每隔几毫秒触发一次； dragleave 是 dragenter 的反义词； drop 在实际掉落物品时触发。
您必须在任何有效放置目标的元素上同时收听dragenter 和dragover。也就是说，通过侦听这些事件并取消它们的默认操作，将元素变成一个有效的放置目标。在我们的例子中，这适用于拖放区叠加层。

现在我将尝试解释我的代码。

首先我们添加一个侦听器来处理整个页面的dragenter。它只显示叠加层（无需阻止默认操作，因为我们实际上并不打算在页面上放置任何内容，我们只会在叠加层上放置）。
为覆盖设置dragenter 和dragover 的处理程序。它们会阻止默认操作（禁止将其放在那里）并设置dropEffect 给用户一些不错的反馈（尽管现在这在现代浏览器中似乎没有任何作用）。这是测试被拖动的项目是否有效的好地方。
如果鼠标离开拖放区（与整个窗口相同，因为div 覆盖了所有内容），我们会将其隐藏。
设置实际的放置处理程序。

就是这样，非常简单。以下是有人丢弃文件时会发生的情况：

dragenter 用于触发 html 元素。它显示了放置区。
由于鼠标现在位于放置区上方，dragleave 会触发 html 元素，但我们会忽略它。
dragenter 用于 dropzone 开火，然后dragover 继续开火。我们只是说，是的，这是一个有效的放置目标。
drop 触发，在这种情况下我们隐藏 dropzone 并处理文件，或者dragleave 用于 dropzone 触发，在这种情况下我们只是隐藏它。

【讨论】：

这段代码似乎突出了 div 放置区域，但没有处理放置。（火狐。）
在 ff 量子中按预期工作。

【解决方案2】：

这就是最终的工作

首先是 HTML 代码：

<body id="drop1" align=center>
<DIV id="content" >Drop files here

<h1 align=center>A File Preview Demo</h1>

    <DIV id="status">Drag the files from a folder to a selected area ...</DIV>
    <DIV id="drop2">Drop files here.</DIV>
    <DIV id="list"></DIV>
    <DIV id="list2"></DIV>
</DIV>
</body>

接下来是 CSS 代码：

html,body{
    height: 96%;
    }

#drop1 {
    height: 100%;
    width: 97%;
    border: 2px solid blue;
    margin: 0px;
    padding: 10px;
    background-color: yellow;
    overflow:hidden; 
}
#drop2 {
    height: 30%;
    width: 30%;
    border: 1px solid red;
    margin: 10px;
    padding: 10px;
}
#content
{
    height: 100%;
    width: 100%;
}
.hoverClass {
    background-color: blue;
}
.dropClass {
    background-color: green;
}

最后的 JS 代码：

if (window.FileReader) {
    var drop;
    var drop2;
    var fileNumber = 0;
    addEventHandler(window, 'load', function () {
        var status = document.getElementById('status');
        drop = document.getElementById('drop1');
        drop2 = document.getElementById('drop2');
        var list = document.getElementById('list');
        var list2 = document.getElementById('list2');


        function cancel(e) {
            if (e.preventDefault) {
                e.preventDefault();
            }
            return false;
        }

        // Tells the browser that we *can* drop on this target
        addEventHandler(drop, 'dragover', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE) 
            if (e.preventDefault) {
                e.preventDefault();
            }
            fileNumber = fileNumber + 1;
            status.innerHTML = fileNumber;
            $("#drop1").css("background-color", '#AA0000');

            return false;
        });
        // Tells the browser that we *can* drop on this target
        addEventHandler(drop, 'dragleave', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE) 
            if (e.preventDefault) {
                e.preventDefault();
            }
            fileNumber = fileNumber + 1;
            status.innerHTML = fileNumber;
            $("#drop1").css("background-color", '#FF0000');

            return false;
        });

        addEventHandler(drop, 'dragenter', cancel);
        addEventHandler(drop2, 'dragover', cancel);
        addEventHandler(drop2, 'dragenter', cancel);


        addEventHandler(drop, 'drop', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE)   
            if (e.preventDefault) {
                e.preventDefault();
            } // stops the browser from redirecting off to the image.

            var dt = e.dataTransfer;
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                //attach event handlers here...  
                reader.readAsDataURL(file);

                addEventHandler(reader, 'loadend', function (e, file) {
                    var bin = this.result;
                    var newFile = document.createElement('div');
                    newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
                    list.appendChild(newFile);
                    var fileNumber = list.getElementsByTagName('div').length;
                    status.innerHTML = fileNumber < files.length ? 'Loaded 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

                    var img = document.createElement("img");
                    img.file = file;
                    img.src = bin;
                    list.appendChild(img);
                }.bindToEventHandler(file));
            }
            return false;
        });

        addEventHandler(drop2, 'drop', function (e) {
            e = e || window.event; // get window.event if e argument missing (in IE)   
            if (e.preventDefault) {
                e.preventDefault();
            } // stops the browser from redirecting off to the image.

            var dt = e.dataTransfer;
            var files = dt.files;
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                var reader = new FileReader();

                //attach event handlers here...  
                reader.readAsDataURL(file);

                addEventHandler(reader, 'loadend', function (e, file) {
                    var bin = this.result;
                    var newFile = document.createElement('div');
                    newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
                    list.appendChild(newFile);
                    var fileNumber = list.getElementsByTagName('div').length;
                    status.innerHTML = fileNumber < files.length ? 'Loaded2 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

                    var img = document.createElement("img");
                    img.file = file;
                    img.src = bin;
                    list.appendChild(img);
                }.bindToEventHandler(file));
            }
            return true;
        });

        Function.prototype.bindToEventHandler = function bindToEventHandler() {
            var handler = this;
            var boundParameters = Array.prototype.slice.call(arguments);
            //create closure
            return function (e) {
                e = e || window.event; // get window.event if e argument missing (in IE)   
                boundParameters.unshift(e);
                handler.apply(this, boundParameters);
            }
        };
    });
} else {
    document.getElementById('status').innerHTML = 'Your browser does not support the HTML5 FileReader.';
}

function addFile(evt) {
    e = e || window.event; // get window.event if e argument missing (in IE)   
    if (e.preventDefault) {
        e.preventDefault();
    } // stops the browser from redirecting off to the image.

    var dt = e.dataTransfer;
    var files = dt.files;
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var reader = new FileReader();

        //attach event handlers here...  
        reader.readAsDataURL(file);

        addEventHandler(reader, 'loadend', function (e, file) {
            var bin = this.result;
            var newFile = document.createElement('div');
            newFile.innerHTML = 'Loaded : ' + file.name + ' size ' + file.size + ' B';
            list.appendChild(newFile);
            var fileNumber = list.getElementsByTagName('div').length;
            status.innerHTML = fileNumber < files.length ? 'Loaded2 100% of file ' + fileNumber + ' of ' + files.length + '...' : 'Done loading. processed ' + fileNumber + ' files.';

            var img = document.createElement("img");
            img.file = file;
            img.src = bin;
            list.appendChild(img);
        }.bindToEventHandler(file));
    }
    return false;
}

//seperate event
function addEventHandler(obj, evt, handler) {
    if (obj.addEventListener) {
        // W3C method
        obj.addEventListener(evt, handler, false);
    } else if (obj.attachEvent) {
        // IE method.
        obj.attachEvent('on' + evt, handler);
    } else {
        // Old school method.
        obj['on' + evt] = handler;
    }
}

http://jsfiddle.net/JtJ5N/79/

编码愉快！

【讨论】：

无论我尝试什么，这段代码都会两次添加文件。除此之外，一个很好的插图。谢谢。 PS 使用 Firefox。