我正在尝试获得与dropbox拖放相似的功能。我希望尽可能使用基本的Web组件/编码来实现这一点。 HTML或HTML5是最好的。这对原型来说越快越好。这是我想要实现的目标：
1）用户应该能够将文件从计算机拖放到网页上的任何位置。 2）当一个项目被拖过它时，网页本身应该显示一些指示符（即：突出显示或颜色叠加）。
我已经看过几个示例的代码片段，但它们都限制将已经在屏幕上的容器丢弃到其他容器而不是将其放入网页中。
删除的文件不需要上传到任何地方，因为这将是一个演示。
任何人都有一些代码片段可以让我继续前进。
答案 0 :(得分：10)
基本理念是：
html元素，该元素将在页面上拖动某些内容时显示该区域。以下代码对我有用：https://jsfiddle.net/oL2akhtz/。
这部分HTML5规范有点奇怪。要记住的最重要的事情是这些：
dragenter会触发;当我们在元素上拖动某些内容时，dragover会每隔几毫秒触发一次; dragleave与dragenter相反;当事情真的被丢弃时，drop会发火。dragenter和dragover。也就是说，通过侦听这些事件并取消其默认操作，该元素将变为有效的放置目标。在我们的例子中，这适用于放置区覆盖。现在我将尝试解释我的代码。
dragenter的侦听器。它只显示叠加层（并且不需要阻止默认操作，因为我们实际上不打算在页面上删除任何内容，我们将只在叠加层上删除。）dragenter和dragover的处理程序。它们阻止默认操作（禁止在那里丢弃）并设置dropEffect以给用户一些很好的反馈（尽管现在在现代浏览器中似乎什么都不做）。这是测试被拖动项目是否有效的好地方。div涵盖了所有内容），我们将其隐藏。就是这样，很简单。以下是有人删除文件时发生的情况：
dragenter html元素触发。它显示了dropzone。dragleave元素的html会触发，但我们会忽略它。dragenter为dropzone开火，然后dragover继续射击。我们只是吉普车说，是的，这是一个有效的下降目标。drop点火，在这种情况下我们会隐藏掉区并处理文件，或者dragleave表示我们只是隐藏掉落区域。答案 1 :(得分：0)
以下是最终工作的内容
首先是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;
}
}
快乐的编码！