Получить и отправить на сервер файл Json (Drag & Drop) без ajax - PullRequest
1 голос
/ 27 мая 2020

Я застрял с этой проблемой (это простая реализация Drag & Drop):

<!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 как объект на сервер, который расшифровывает информацию (но мне нужно просто отправить его в запросе asyn c HttpPOST). Я бы хотел отправлять информацию без ajax или чего-то подобного (не $ .get, et c.). Я хотел бы сделать это с помощью fetch, this и catch. Я не понимаю, как это работает, и буду рад, если вы мне поможете.

Спасибо!

1 Ответ

1 голос
/ 27 мая 2020

В Mozilla есть хороший пример того, как получить удаленный файл

Вам нужно просто получить доступ к свойству dataTransfer в объекте DragEvent.

(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, et c.). Я хотел бы сделать это с помощью fetch, this и catch. Я не понимаю, как это работает, и буду рад, если вы мне поможете.

Это сложная часть. Вы должны подумать, не лучше ли использовать FormData, поскольку отправка Blob таким способом довольно проста.

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

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

Для application/json, однако вы можете либо преобразовать File/Blob объект в dataURL или base64 с некоторой информацией о расширении файла

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...