Question

我希望删除的文本文件按其内容或完整位置显示，以便我可以将该位置的内容加载到“drop_zone”中。

这就是我现在所拥有的。我只能访问文件名：

<html>
<head>
  <title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.
    document.getElementById('drop_zone').innerHTML = files[0].name;
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>

Answer 1

这是最终代码：

<html>
<head>
  <title></title>
</head>
<body>
<textarea id="drop_zone">Drop files here</textarea>
<script>
  function handleFileSelect(evt) {
    evt.stopPropagation();
    evt.preventDefault();

    var files = evt.dataTransfer.files; // FileList object.
    var reader = new FileReader();  
    reader.onload = function(event) {            
         document.getElementById('drop_zone').value = event.target.result;
    }        
    reader.readAsText(files[0],"UTF-8");
  }

  function handleDragOver(evt) {
    evt.stopPropagation();
    evt.preventDefault();
    evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  }

  // Setup the dnd listeners.
  var dropZone = document.getElementById('drop_zone');
  dropZone.addEventListener('dragover', handleDragOver, false);
  dropZone.addEventListener('drop', handleFileSelect, false);
</script>
</body>
</html>

Answer 2

http://www.html5rocks.com/en/tutorials/file/dndfiles/应该是一个很好的资源。您需要使用FileReader以String形式读取文件的内容。

Answer 3

由于安全限制，如果设置了具有适当权限的Java applet，页面将无法加载文件内容;即便如此，也不太可能。

然而，这并不是说这是不可能的;只需将文件上传到服务器并将内容回送给浏览器即可。这就是有多少文本编辑类型的Web应用程序运行。

如何实现这一点取决于你。

此外，正如Maz指出的那样，您还可以使用内置API来帮助您完成您正在尝试的操作。请注意，此解决方案不一定是跨浏览器兼容的。

拖动并删除文本文件

3 个答案: