在没有ajax的情况下获取并发送一个Json文件（拖放）到服务器答案

【问题标题】：Get and send to a server a Json file (Drag & Drop) without ajax在没有ajax的情况下获取并发送一个Json文件（拖放）到服务器
【发布时间】：2020-09-13 20:09:51
【问题描述】：

我被这个问题困住了（这是拖放的简单实现）：

<!DOCTYPE html>
<style type="text/css">
	body {
		font-family: "Arial",sans-serif;
	}
	.dropzone {
		width: 300px;
		height: 300px;
		border: 2px dashed #ccc;
		color: #ccc;
		line-height: 300px;
		text-align: center;
	}

	.dropzone.dragover {
		border-color: #000;
		color: #000;
	}
</style>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<div id = "uploads"></div>
	<div class="dropzone" id="dropzone">Drop Here</div>

	<script type="text/javascript">
        (function () {
            var dropzone = document.getElementById('dropzone');

            dropzone.ondrop = function (e) {
                e.preventDefault();
                this.className = 'dropzone';
            };
            // On the area
            dropzone.ondragover = function () {
                this.className = 'dropzone dragover';
                return false;
            };

            // Leave the area while pressing
            dropzone.ondragleave = function () {
                this.className = 'dropzone';
            };

            dropzone.ondrop = function (event) {
                event.preventDefault();
                this.className = 'dropzone';
            };

        }());

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

我想知道如何获取我放入“框”文件的文件（在我的情况下为 JSON 文件）。如何获取此文件并对其进行一些操作（例如以 POST 格式将其发送到服务器）。

我想知道如何获取这个丢弃的文件并获取它以便我可以访问它或类似的东西。

顺便说一句，我想知道如何将这个 json 作为对象发送到解密信息的服务器（但我只需要在异步 HttpPOST 请求中发送它）。我想在没有 ajax 或类似的东西（不是 $.get 等）的情况下发送信息。我想用 fetch、this 和 catch 来做到这一点。我不明白它是如何工作的，如果你能帮助我，我会很高兴。

谢谢！

【问题讨论】：

标签： javascript json file asp.net-core drag-and-drop

【解决方案1】：

Mozilla has a good example of how to get dropped file

您只需访问DragEvent 对象中的dataTransfer 属性。

(function() {
  var dropzone = document.getElementById('dropzone');

  dropzone.ondrop = function(e) {
    e.preventDefault();
    this.className = 'dropzone';
  };

  dropzone.ondragover = function() {
    this.className = 'dropzone dragover';
    return false;
  };

  dropzone.ondragleave = function() {
    this.className = 'dropzone';
  };

  dropzone.ondrop = function(event) {
    const [item] = event.dataTransfer.items;
    
    console.log(item.getAsFile());
    
    event.preventDefault();
    this.className = 'dropzone';
  };

}());

body {
  font-family: "Arial", sans-serif;
}

.dropzone {
  width: 300px;
  height: 300px;
  border: 2px dashed #ccc;
  color: #ccc;
  line-height: 300px;
  text-align: center;
}

.dropzone.dragover {
  border-color: #000;
  color: #000;
}

<div id="uploads"></div>
<div class="dropzone" id="dropzone">Drop Here</div>

我想知道如何将此 json 作为对象发送到服务器解密信息（但我只需要异步发送它 HttpPOST 请求）。我想做信息的发送没有 ajax 或类似的东西（不是 $.get 等）。我想使用 fetch、this 和 catch 执行此操作。我不明白它是如何工作的如果你能帮助我，我会很高兴。

现在这是一个棘手的部分。您必须考虑使用FormData 是否更好，因为通过这种方式发送Blob 很容易。

const formData = new FormData();
formData.append("file", file);

fetch(url, {method: 'POST', body: formData})

对于application/json，您可以将File/Blob object to dataURL or base64 转换为一些有关文件扩展名的信息

【讨论】：

非常感谢！