Прошу помощи с ajax
Достался мне код, но он почему-то ничего не кидает. Помогите поправить запрос, чтобы отправлял на сервер файл. Просто колесико крутит и скриншот файла показывает. Всем спасибо!
async function load_preview_files(orderid, input) { // Преобразуем FileList в массив const files = Array.from(input.files); // Создаем копию input для очистки const originalInput = input; try { // Массив промисов для загрузки const uploadPromises = files.map(async (file, i) => { // Создаем FormData для каждого файла const formData = new FormData(); formData.append('action', 'preload_order_files'); formData.append('file', file); const id = Math.floor(Math.random() * 100); formData.append('fileid', id); formData.append('orderid', orderid); // Показываем превью файла preview_order_files_thumbs(file, id); try { // Асинхронная загрузка файла с использованием XMLHttpRequest const xhr = new XMLHttpRequest(); // Добавляем обработку прогресса загрузки xhr.upload.addEventListener('progress', function (event) { if (event.lengthComputable) { var percentComplete = (event.loaded / event.total) * 100; // Обновляем прогресс-бар if(percentComplete>99){ $('#preloaded_file_orderfile_id' + id).find('progress').val(100); $('#preloaded_file_orderfile_id' + id).find('.loading_progress').text(`загружен, проверяем файл...`); } else{ $('#preloaded_file_orderfile_id' + id).find('progress').val(percentComplete); $('#preloaded_file_orderfile_id' + id).find('.loading_progress').text(`${Math.round(percentComplete)}%`); } } }); // Обработка завершения загрузки xhr.onreadystatechange = function () { if (xhr.readyState === 4) { if (xhr.status === 200) { const result = JSON.parse(xhr.responseText); $('#preloaded_file_orderfile_id' + id).replaceWith(` <div class="col-12 __onlyforthumbs_file" id="preloaded_file_orderfile_id${result.imgid}"> <input type="hidden" name="fileattaches[]" value="${result.imgid}"> <div class="uploaded-file "> <button type="button" class="remove-file" onclick="remove_file(${result.imgid});"><svg class="icon icon-close-circle"><use xlink:href="/img/sprite.svg#close-circle"></use></svg></button> <span class="uploaded-file__name">${result.preview}</span><span class="uploaded-file__weight">${result.filesize}</span></div></div>`); $('#submit_chat_btn').removeAttr('disabled'); } else { console.error('Upload failed:', xhr.statusText); } } }; // Настройка запроса xhr.open('POST', '', true); // Отправляем запрос xhr.send(formData); } catch (error) { console.error(`Error uploading file ${file.name}:`, error); return null; } }); // Ожидаем загрузку всех файлов const results = await Promise.all(uploadPromises); // Очищаем input originalInput.value = ''; return results; } catch (error) { console.error('Upload process failed:', error); } } |
А адрес (URL) сервера где?
Ошибки в консоли смотрите? Функция, которая задана в map сразу возвращает промис, разрешенный с undefined. Он не ждет когда данные отправятся на сервер. Тут должна быть простая (не async) функция, которая возвращает промис. А resolve этого промиса долже быть в части onreadystatechange, когда пересыдка закончится. А в части catch (error) - reject Promise.all тут - не самое удачное решение. Он будет отклонен, как только хотя бы в одном из файлов при передачи произойдет ошибка. Остальные он ждать не будет. Правильнее будет Promise.allSettled(). |
Часовой пояс GMT +3, время: 13:56. |