Question

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

我在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>

请阅读：Using files from web applications。

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

1 个答案: