@Nube

Как отправить изображения используя websocket js?

Я хочу отправить изображения через websocket, но терплю неудачу, плюс я до этого c js не работал (
Надеюсь кто-нибудь сталкивался с такой задачей .
Разметка html
<div class="frame" id="scene">
        <div class="cardView">
            <input type="file" id="fileElem" multiple="true" accept="image/*" style="display:none" onchange="handleFiles(this.files)" >
            <button id="fileSelect">Download Images</button>
        </div>
        <div id="imgContainer">
            <ul id="img-list"></ul>
        </div>
        <div>
            <button id="btnUploadImage">Отправить на сервер</button>
        </div>
    </div>

Это слушатели, сперва создаются изображения
var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem");

fileSelect.addEventListener("click", function (e) {
    if (fileElem) {
        fileElem.click();
    }
}, false);

//Создаем элементы
function handleFiles(files) {

    var list = document.getElementById("img-list")
    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        var li = document.createElement("li");
        list.appendChild(li);
        var img = document.createElement("img");
        img.src = window.URL.createObjectURL(file);
        img.height = 60;
        img.onload = function () {
            window.URL.revokeObjectURL(this.src);
        }
        li.appendChild(img);
      // Это метод должен был сработать при нажатие на кнопку "отправить на сервер"
        uploadFile(files)
    }
}

Потом я пробегаю циклом по созданным данным и пытаюсь передать их через сокет
Прикол в том что я не знаю как передать созданные объекты, поэтому передал все данные прямо в методе выше -handleFiles, ожидая ошибку, но консоль молчит )
Собственно сам метод отправки созданных изображений
//Пробежимся по элементам
btnUploadImage.addEventListener("click" ,uploadFile)

function uploadFile(files) {

    for (var i = 0; i < files.length; i++) {
        file = files[i]
        var reader = new FileReader()
        var rawData = new ArrayBuffer();
        reader.onloadend = function (e) {
            rawData = e.target.result;

            var images = rawData
            var data = { query_type:"loadFrame",   data : {images: images}  }
            console.log(data)
            socket.send(JSON.stringify(data))
        }
        reader.readAsArrayBuffer(file);
    }
}

Данных на сервере нет и консоль молчит поэтому я даже не знаю, где у меня ошибка(не считая, что uploadFile вызывается из handleFile) . В общем нуждаюсь в вашей помощи .Спасибо!
з.ы. По идее я бы хотел бы загружать средствами сервера, например как request.FormFile().
  • Вопрос задан
  • 1193 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы