HTML JS JQ 如何从 2 个文本文件中拖放内容

Question

问题：我有 2 个内容不同的文本文件，f. E. textfile1 包含 "lorem" textfile2 包含 "ipsum"。展位保存在同一个文件夹中。如何在屏幕上显示 2 个文件并将屏幕上的特定文件(拖到div 或其他什么(，另一个在第一个文件的上方或下方？

我从 Selfhtml 和其他教程中找到了 https://www.html5rocks.com/de/tutorials/dnd/basics/和基本内容，但无法指定文件夹。

这是代码，与教程相同：

<div id="dropzone"> Ziehen Sie Ihre Dateien mit Drag & Drop hier herein:
<br> (Durch Drücken der [strg]-Taste können Sie mehrfach auswählen!) </div>
<output
id="list"></output>
</main>
<script>
function dateiauswahl(evt) {
evt.stopPropagation();
evt.preventDefault();
var gewaehlteDateien = evt.dataTransfer.files; // FileList Objekt
var output = [];
for (var i = 0, f; f = gewaehlteDateien[i]; i++) {
output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a',
') - ', f.size, ' bytes, last modified: ', f.lastModifiedDate.toLocaleDateString(),
'</li>');
}
document.getElementById('list')
.innerHTML = '<ul>' + output.join('') + '</ul>';
}
function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy';
}
// Initialisiere Drag&Drop EventListener
var dropZone = document.getElementById('dropzone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', dateiauswahl, false);
</script>

有人知道其他教程吗？

Answer 1

这就是我的做法。(该代码允许您根据需要拖放任意数量的.txt文件(

我希望我正确理解了你的问题。

var dropzone = document.querySelector('#dropzone');
dropzone.addEventListener("dragenter", onDragEnter, false);
dropzone.addEventListener('dragover', onDragOver, false);
dropzone.addEventListener('drop',onDrop, false);
function onDragEnter(e) {
e.stopPropagation();
e.preventDefault();
}
function onDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
evt.dataTransfer.dropEffect = 'copy'; // it's a copy!
}
function onDrop(evt) {
evt.stopPropagation();
evt.preventDefault();
var files = evt.dataTransfer.files;// object FileList
for (var i = 0; i < files.length; i++) {
if(files[i].type == "text/plain"){
var reader = new FileReader();
reader.onload = function(event) {
dropzone.value += event.target.result; 
//console.log(event.target)
}
//instanceOfFileReader.readAsText(blob[, encoding]);
reader.readAsText(files[i], "UTF-8");
}else{console.log(files[i].type);}
}  
}

#dropzone {
display: block;
width: 300px;
height: 300px;
position: relative;
margin: 0 auto;
padding: 1em;
border: 1px dashed;
}
p{text-align:center; margin:2.5em;}

<p>Drop one or more .txt files on the textarea:</p>
<textarea id="dropzone"> </textarea>

请阅读：使用来自 Web 应用程序的文件。