Question

我正在尝试使用＆lt;预览同一页面中的文件。嵌入＆GT;点击后标记。我发现这种方式显示文件系统中的目录，但是在我点击文件后，它直接下载（ppt，pdf ...）或在新页面中打开（jpeg，png）救命！这是结果的屏幕截图：Screenshot of webpage after dropping a file direcory

这是HTML代码：

<!DOCTYPE html>
<html>
<head>
 <script src="jquery-3.2.1.min.js"></script>
</head>
<body>

<p>Drag files and/or directories to the box below!</p>

<div id="dropzone">
<div id="boxtitle">
  Drop Files Here
</div>
</div>

<h2>Directory tree:</h2>

<ul id="listing">
</ul>
</body>
</html>

这是javascript代码：

let dropzone = document.getElementById("dropzone");
let listing = document.getElementById("listing");

function scanFiles(item, container) {
let elem = document.createElement("li");
elem.innerHTML = item.name;
container.appendChild(elem);

if (item.isDirectory) {
let directoryReader = item.createReader();
let directoryContainer = document.createElement("ul");
container.appendChild(directoryContainer);

directoryReader.readEntries(function(entries) {
    entries.forEach(function(entry) {
      scanFiles(entry, directoryContainer);
  });
});
}
}
dropzone.addEventListener("dragover", function(event) {
event.preventDefault();
}, false);
dropzone.addEventListener("drop", function(event) {
let items = event.dataTransfer.items;

event.preventDefault();
listing.innerHTML = "";

for (let i=0; i<items.length; i++) {
let item = items[i].webkitGetAsEntry();

if (item) {
    scanFiles(item, listing);
}
}
}, false);

单击后预览同一页面中的元素

0 个答案: