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

Question

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

<!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>

我想知道我怎样才能得到我放在 "box" 文件中的文件（在我的例子中是 JSON 文件）。我怎样才能得到这个文件并用它做一些操作（比如将它以 POST 格式发送到服务器）。

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

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

谢谢！

Answer 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>

I would like to know how can I send this json as an object to a server that deciphers the information (but I need just to send it in async HttpPOST request). I would like to do the sending of the information without ajax or something like that (not $.get, etc.). I would like to do that with fetch, this and catch. I do not understand how it works and I will be happy if you may help me.

现在这是一个棘手的部分。您必须考虑使用 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

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

Get and send to a server a Json file (Drag & Drop) without ajax

javascript

json

drag-and-drop

file

asp.net-core