Я не могу отправить данные на сервер с помощью AJAX - PullRequest
0 голосов
/ 20 февраля 2019

Ситуация следующая: я загружаю изображение перетаскивания на сервер.Все было бы проще, но сначала вам нужно встроить отброшенное изображение в дерево DOM, после чего оно может быть удалено оттуда, а остальное необходимо отправить на сервер.При событии drop я добавляю сам файл и изображение className в ассоциативный массив.После того, как пользователь готов отправить все оставшиеся изображения на сервер, я добавляю файлы с классами оставшихся изображений в качестве ключа к новому массиву и формирую его FormData.Но сервер не получает файлы.Помогите!

код:

 var arr = new Map;
//create a associative array.
 dnd.addEventListener('drop', e => {
            e.preventDefault();
            var image_ = e.dataTransfer.files;

.....

  //embed dropped image into the DOM tree
const text = e.dataTransfer.getData("text");
        if (text) {

            let img = document.createElement('img');
            img.src = text;
            $('#container_').append(img);
        }
        else {

            const files = e.dataTransfer.files;
            [].map.call(files, file => {
                if (file.type.match(/^image/)) {

                    let reader = new FileReader();
                    reader.onload = file => {


                        let img = document.createElement('img');

                        img.className = "droppedPhoto" + Math.random();
                        img.setAttribute("widt", "200");
                        img.setAttribute("height", "200");
                        img.src = file.target.result;


                        let div = document.createElement('div');
                        $('#container_').append(div);
                        $('#container_').children().last().append(img);

                        arr.set(img.className, image_);

  $('.sendPhotos > p > button').on('click', function () {
        checkData(arr);

    });

    function checkData(array) {
        var $arrOfImg = $('#container_ > div > img');
        var $newArrayOfData =[]; 
        for (var i = 0; i < $arrOfImg.length; i++) {
            if (array.has($arrOfImg[i].className)) {
            $newArrayOfData.push(array.get($arrOfImg[i].className));

            }
        }
        createFormData($newArrayOfData);
    }


    function createFormData(images) {
        var formImage = new FormData();
        for (var i = 0; i < images.length; i++) {

            formImage.append(key, images[i]); 
        }

        uploadFormData(formImage);               
    }

    function uploadFormData(formData) {

        $.ajax({

            url: '@Url.Action("PhotoSessionInfo", "Home")',
            type: "POST",
            xhr: function () {
                var myXhr = $.ajaxSettings.xhr();
                return myXhr;
            },
            data: formData,
            contentType: 'multipart/form-data',
            cache: false,
            processData: false,
            success: function (response) {
                console.log("success");
                $('#container_').html(response);

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