Получите файл и подготовьте его к отправке на сервер - Java Скрипт - PullRequest
Новая
       6

Получите файл и подготовьте его к отправке на сервер - Java Скрипт

0 голосов
/ 27 мая 2020

У меня есть простой пример перетаскивания, и мне нужно получить от него файл json и отправить его на сервер (POST) без ajax.

Для этого я нужно каким-то образом взять это событие и создать из него 'a json или что-то в этом роде и отправить на сервер.

Проблема в том, что я не знаю, как сделать его текущим типом что мне нужно отправить.

Я пробовал что-то, но это не работает, и на самом деле «Я не знаю, что я здесь делаю.

Я хотел бы знать, как это сделать, и понять что происходит.

(И для отправки на сервер 'мне нужно сделать это без ajax, потому что в моем исходном проекте это не работает [потому что он не проверяет jQuery или что-то вроде это, но сначала мне нужно решить проблему с файлом json, который я кладу в "коробку"]). 

<!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.ondragover = function () {
                this.className = 'dropzone dragover';
                return false;
            };

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

            dropzone.ondrop = function (event) {

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

        }());

        function uploadPostToServer(itemEvent) {
            let fileToSend = itemEvent[0];

            if (!fileToSend.type.match('application/json')) {
                alert("Error: can't upload json file");
                return;
            }

            let reader = new FileReader();

            reader.readAsBinaryString(fileToSend.getAsFile());

            console.log(reader.result);
        }

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

Спасибо.

...