9

我希望通过其内容或完整位置显示删除的文本文件，以便我可以将该位置的内容加载到“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>
4

3 回答 3

14

这是最终代码：

<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>
于 2012-08-31T12:06:28.613 回答
6

http://www.html5rocks.com/en/tutorials/file/dndfiles/应该是一个很好的资源。您需要使用 FileReader 将文件的内容作为字符串读取。

于 2012-08-31T11:10:16.610 回答
0

由于安全限制，如果没有设置适当权限的 Java 小程序，页面将无法加载文件内容；即使那样，也不太可能。

但是，这并不是说不可能。只需将文件上传到服务器并将内容回显到浏览器即可。这就是许多文本编辑类型的 Web 应用程序的功能。

如何实现这取决于您。

此外，正如 Maz 所指出的，您还可以使用内置 API 来帮助您做您想做的事情。但是请注意，此解决方案不一定是跨浏览器兼容的。

于 2012-08-31T11:12:18.450 回答