【问题标题】：Only upload file names and metadata仅上传文件名和元数据
【发布时间】：2020-05-04 20:02:17
【问题描述】：

是否可以在网站上设置一个上传框，用户可以在其中拖动文件文件夹，而不是上传整个文件夹，您可以只获取文件名和元数据？

【问题讨论】：

【解决方案1】：

不完整，但可能是一个好的开始......

这可以通过dropzone.js 实现，方法是将autoProcessQueue 选项设置为false。然后，您可以通过 GUI 删除文件/文件夹，而无需实际上传，但仍然可以访问 javascript 中的 file 对象以获取元数据。

请参阅this answer，了解有关如何添加手动按钮以最终开始处理此队列（如果您愿意）的更多信息。无论您是否处理该队列，您都可以使用addedfile 事件手动检查file 对象。

一个非常基本的示例，从 CDN 加载脚本，如下所示：

<html>
<head>
  <title> Dropzone</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.css" integrity="sha256-0Z6mOrdLEtgqvj7tidYQnCYWG3G2GAIpatAWKhDx+VM=" crossorigin="anonymous" />
</head>
<body>
  <div>
      <form method='POST'
        enctype="multipart/form-data"
        class="dropzone"
        id="my-awesome-dropzone"></form>
   </div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.5.0/dropzone.js" integrity="sha256-NLit4Z57jz8npRHkopjfr68hSZY1x/ruN0T8kf68xq4=" crossorigin="anonymous"></script>

<script type='text/javascript'>

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("form#my-awesome-dropzone",
{ url: "/upload",
  autoProcessQueue: false,
});

myDropzone.on("addedfile", function(file) {
  // runs for every file dropped
  console.log(file.name, file.fullPath, file.lastModified, file.size);
});

</script>
</body>
</html>

使用上述代码删除单个文件会输出如下内容：

 views.py undefined 1567770276854 1604

您可以删除整个文件夹，每个文件都会递归出现，包括每个文件的file.fullPath：

models.py stack/models.py 1566159281216 1974
serializers.py stack/serializers.py 1565978398499 309
...

您可以改为 console.log(file) 进一步检查该对象（在浏览器的开发工具控制台中）以查看其他可用的元数据。

要将这些数据发送到后端，您可以使用fetch API 或类似的 AJAX 发布功能。您可能希望将所有信息添加到数组中，然后使用绑定到“上传元数据！”的另一个事件处理程序立即将其发布到后端。按钮。

【讨论】：