Мобильная версияЯ работаю над веб-сайтом Django для некоммерческой организации. Я нахожусь в разделе изображений профиля. Я пытаюсь загрузить изображения, используя изображение в качестве кнопки для отправки. У меня открывается выбор файлов. Затем он отправляется после завершения выбора файла. Должно быть сохранено изображение, загруженное в базу данных Django. На данный момент мой запрос AJAX к представлению Django, его функция успеха работает правильно. Однако, когда я пытаюсь распечатать на терминале свой тест, в терминале Python ничего не печатается. Кроме того, изображение не обновляется должным образом.
# source\templates\profile-pages\child-profile.html ... $(документ).ready(функция () { if (typeof jQuery == 'не определено') { console.error('jQuery не загружен!'); } еще { console.log('jquery загружен'); } // Получаем изображение и элементы ввода var imageButton = document.getElementById("кнопка изображения"); var fileInput = document.getElementById("file-input"); // Добавляем прослушиватель событий клика к элементу изображения imageButton.addEventListener("click", function (e) { // Имитируем щелчок по скрытому элементу ввода е.preventDefault(); fileInput.клик(); }); // Добавляем прослушиватель событий изменения к элементу ввода fileInput.addEventListener("изменение", функция (e) { е.preventDefault(); // Получаем выбранный файл из элемента ввода вар файл = fileInput.files[0]; console.log(файл); console.log(тип файла); // Создаём URL для файлового объекта если ( !( file.type == "изображение/jpeg" || file.type == "изображение/jpg" || file.type == "изображение/png" ) ){ alert("Изображение должно быть в формате JPEG, JPG или PNG"); $("#fileInput").val(""); вернуть ложь; } вар formData = новый FormData (); formData.append("newPic", файл); // Обновляем источник изображения, используя URL-адрес файла // imageButton.src = URL; $('#submitBtn').submit(submitF(e, formData)); }); функция submitF(e, картинка) { е.preventDefault(); // if (!$("#fileInput").val()) { // alert("Пожалуйста, выберите файл"); // } // вар formData = новый FormData(this); console.log("Данные формы. #picform отправлено"); $.ajax({ заголовки: { 'X-CSRFToken': $("input[name=csrfmiddlewaretoken]").val(), }, url: "{% url 'users:profile' %}", // URL: "/профиль", данные: { новоеКартинка: картинка, csrfmiddlewaretoken: $("input[name=csrfmiddlewaretoken]").val(), }, метод: «ПОСТ», contentType: false, // Установите для contentType иprocessData значение false для загрузки файлов данные процесса: ложь, успех: функция (данные) { Оповещение("Успех"); }, ошибка: функция (xhr, статус, ошибка) { console.log("Ошибка AJAX: ", статус, ошибка); }, }); // $("#imageButton").attr("src", formData); } }); ... {% загрузки Crispy_forms_tags %} {% csrf_token %} {% если request.user.profile_pic.url %} {% elif request.user.profile_pic.url == Нет %}
Тест
{% конечный %} Отправить ... #users\views.py ... @login_required профиль защиты (запрос): пользователь = get_object_or_404 (afbUsers) если запрос.метод == 'POST': new_pic_file = request.FILES.get('newPic') если новый_pic_file: print('тестирование 123', new_pic_file.name) # Обновите логику в зависимости от вашей модели и способа обработки файла. user.profile_pic = новый_pic_file пользователь.сохранить() messages.success(request, «Обновление изображения профиля выполнено успешно!») return JsonResponse({'статус': 'успех'}) еще: messages.error(запрос, «Файл не загружен.») return JsonResponse({'status': 'error', 'message': 'Файл не загружен.'}) контекст = {'пользователь': пользователь} вернуть рендеринг (запрос, 'profile-pages/child-profile.html', контекст) ...
