原生代码手搓拖拽文件夹上传

33 阅读1分钟

demo1 `

拖拽文件夹到这里
	<script>
	const dropzone = document.getElementById('dropzone');
	
	dropzone.addEventListener('dragover', (e) => {
	  e.preventDefault();
	  dropzone.style.borderColor = 'blue';
	});
	
	dropzone.addEventListener('dragleave', (e) => {
	  e.preventDefault();
	  dropzone.style.borderColor = '#ccc';
	});
	
	dropzone.addEventListener('drop', (e) => {
	  e.preventDefault();
	  dropzone.style.borderColor = '#ccc';
	  
	  const items = e.dataTransfer.items;
	
	  for (let i = 0; i < items.length; i++) {
	    const item = items[i].webkitGetAsEntry(); // 注意:仅Chrome/Edge支持
	    if (item) {
	      traverseFileTree(item);
	    }
	  }
	});
	
	function traverseFileTree(item, path = "") {
	  if (item.isFile) {
	    item.file((file) => {
	      console.log("文件:", path + file.name);
	      // 这里可以上传文件
	    });
	  } else if (item.isDirectory) {
	    const dirReader = item.createReader();
	    dirReader.readEntries((entries) => {
	      for (let i = 0; i < entries.length; i++) {
	        traverseFileTree(entries[i], path + item.name + "/");
	      }
	    });
	  }
	}
	</script>

	
</body>
`