Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
 Аватар для Marrex
0 / 0 / 0
Регистрация: 31.05.2016
Сообщений: 129

Повторная смена картинки и вообще загрузка не работает

03.08.2024, 19:36. Показов 433. Ответов 5
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Привет профессионалам!
Всё работает отлично, только до повторной попытки сменить картинку.
Как это работает и как не работает...
Обычная загрузка файла js на сервер с помощью php, без перезагрузки страницы.
HTML5
1
<input type="file"  id="userfile">
На сервере... упрощенно после всех проверок:
PHP
1
imagepng(imagecreatefromstring( file_get_contents($_FILES['file']['tmp_name'])), 'путь' );
Из php отправляем в return- e файл загружен... отправляем в src img
HTML5
1
<img src="путь"  id="ava" >
Новый адрес картинки = window.URL.createObjectURL(file):
blob: https:// домен.ru/8b92 - много буков и цифр - 852e/
Всё прекрасно срабатывает... картинка заменяется на "blob" - она же на сервере.
Страница не перезагружается...
Новая картинка в "инпуте" - ВСЁ ЗАМЕЧАТЕЛЬНО!
JavaScript
1
2
3
4
5
6
7
      if ( return_data== 'Аватар изменен.' )
      {
          let img = new Image();
          var file = document.getElementById('userfile').files[0];
          img.src = window.URL.createObjectURL(file); 
          document.getElementById('ava') . src = img.src; 
      }
И далее без перезагрузки страницы:
При повторной попытке повторить выше приведенные действия.... ни к чему не приводят.
И никакой ошибки не выдает вообще нигде... т.е. такое ощущение, что все просто зависает... как комп.
Перезагружаю - всё нормально работает после первой отправки, а при второй опять 25...
----
Очищаю инпут userfile .value='';...
Проверяю в post js до console.log не доходит...(естественно, что до php еще целый километр...)
И вообще в первой строке в переменной "file" ничего... пусто...
JavaScript
1
2
3
4
5
  
let file = document.getElementById('userfile').files[0]
let data = new FormData();
data.append('file', file);
console.log(data);
----
Перерыл весь интернет... ни слова нет...
Есть какие-нибудь мысли?
----
Заранее спасибо!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
03.08.2024, 19:36
Ответы с готовыми решениями:

Не работает смена картинки
&lt;body&gt; &lt;div id=newchar_bg&gt; &lt;form name=&quot;selclass&quot; &gt; &lt;div id=&quot;class&quot;&gt; ...

Не работает смена картинки
хочу менять картинку способом рондома, но не выходит private void button11_Click(object sender, EventArgs e) { ...

Плавная смена картинки - не работает
&lt;div class=&quot;header&quot;&gt; &lt;img class=&quot;logo&quot; style=&quot;transition:0.8s;&quot; src=&quot;/img/logo.png&quot; /&gt; &lt;/div&gt; .header{ text-align:...

5
413 / 304 / 113
Регистрация: 28.08.2013
Сообщений: 807
04.08.2024, 14:36
JavaScript-код выполняется двумя этапами. Первый, последовательное выполнение кода js-файла. Второй, при наступлении события выполняется указанный код (handler (обработчик события)). Во всех остальных случаях, ничего не происходит.
Если я правильно понял, то нужно JS-код, который загружает картинку, вынести в отдельную функцию и вызывать её (функцию) при загрузке и при клике для смены аватара/картинки.
0
 Аватар для Marrex
0 / 0 / 0
Регистрация: 31.05.2016
Сообщений: 129
04.08.2024, 18:03  [ТС]
Почти всё находится внутри функции post...
Сверху весь процесс описан по пунктам...
1). Физически, кнопкой выбрали файл.
2). Отправили массив $_FILES на сервер.
3). Php - сохранили файл - вернули "return_data"(return_data = xhr.responseText ; ) в функцию "post"(самописную) - "Аватар изменен".
4). Файл ещё внутри инпута... берем его ещё раз... и отправляем blob url в src.
JavaScript
1
2
3
4
5
6
7
if ( return_data== 'Аватар изменен.' )
      {
          let img = new Image();
          var file = document.getElementById('userfile').files[0];
          img.src = window.URL.createObjectURL(file); 
          document.getElementById('ava') . src = img.src; 
      }
---
Если делать с перезагрузкой, то все работает отлично...
Повторная отправка не работает... вчера удалил "blob".... это точно не он...
---
Я предполагаю... где-то затык... в моменте загрузки файла... физически... раз он не может его показать... здесь:
JavaScript
1
let file = document.getElementById('userfile').files[0]
---
Где-то какая-то скрытая [del] сидит... а я её не вижу и понять не могу...
0
Супер-модератор
Эксперт JSЭксперт HTML/CSSЭксперт PHP
 Аватар для gogolik
3954 / 2066 / 829
Регистрация: 13.03.2010
Сообщений: 6,804
04.08.2024, 18:14
Marrex, приведите полный код, который позволит воспроизвести проблему. По вашим обрывкам ничего не понятно.
0
 Аватар для Marrex
0 / 0 / 0
Регистрация: 31.05.2016
Сообщений: 129
04.08.2024, 18:19  [ТС]
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
function main_post()
{
 
  if(document.getElementById('userfile'))
  {
    let file = document.getElementById('userfile').files[0]
    console.log(file); 
    let data = new FormData();
    data.append('file', file);
    var xhr = new XMLHttpRequest();// Создаём объект XMLHTTP
    xhr.open("POST", "https://домен.ru/post.php" , true);// Открываем асинхронное соединение
    xhr.send(data); // Отправляем POST-запрос
  }
  else
  { 
    var xhr = new XMLHttpRequest();
    var data =''; 
    for (var key in send) { data += key +'='+ encodeURIComponent(send[key]) + "&"; }
    xhr.open("POST", 'https://домен.ru/post.php' , true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xhr.send(data);
  }
 
  xhr.onreadystatechange = function()
  {
    return_data = xhr.responseText ; 
 
    var good_array = [
      'Текст записан',
      'Слово заменено', 
 
      'Файл слишком большой',
      'Файл загружен частично',
      'Файл не загружен',
      'type изображения не определен',
      'tmp_name изображения не определен',
      'size изображения не определен',
      'Разрешение файла не более 100 х 100px',
      'Вес файла не более 100кб',
      'Доступно два типа jpeg/png',
      'Папка не создана, поторите операцию!' 
    ]
 
     var bad_array = [
      'Контент еще не редактировался',
      'Ячеека $sp_page пуста....',
      'Ячеека $on_what_change пуста....',
      'Ячеека $what_change пуста....',
      'Слово не заменено',
      'Слово для замены не найдено',
      
      
      'Аватар изменен.',
      'Аватар создан.' 
    ]
 
    if ( return_data== 'Аватар изменен.' ||  return_data== 'Аватар создан.')
    {
      if ( return_data== 'Аватар изменен.' )
      {
          let img = new Image();
          var file = document.getElementById('userfile').files[0];
          img.src = window.URL.createObjectURL(file); 
          console.log(img.src); 
          document.getElementById('ava') . src = img.src;
          document.getElementById('panel_auth_ava') . src = img.src; 
      }
      else 
      {
        document.getElementById('ava').src= hp_ava ;
        document.getElementById('panel_auth_ava').src= hp_ava ;  
      }
 
      setTimeout(function(){  
        if(userfile.classList.contains('catch') ) userfile.classList.remove('catch'); 
        userfile.classList.add('its_def'); 
        userfile .value='';
      }, 2000);
      style . innerHTML = '#form_ex_ { position: absolute; left: -3000px; transition: 2s;}'; is_this . innerHTML =''; 
    }  
      
     
    if (bad_array.includes(return_data)) show_result_post.innerHTML = '<redline>'+return_data+'</redline>';
    else if (good_array.includes(return_data)) show_result_post.innerHTML  = '<greenline>'+return_data+'</greenline>'
    // else show_result_post.innerHTML = 'В массивах такого нет';
    else show_result_post.innerHTML = return_data;
 
    setTimeout(function(){  show_result_post.style ='z-index:501;  left: 0px; transition: 1s;  word-break: break-all;';  }, 200);
 
    setTimeout(function(){  show_result_post.style ='z-index:501;  left:-1500px; transition: 1s;  word-break: break-all'; }, 3000 );
  }
}
Добавлено через 1 минуту
Php не выкладываю... точно проблема не в нем...
0
 Аватар для voraa
1255 / 1193 / 179
Регистрация: 21.01.2024
Сообщений: 5,502
04.08.2024, 20:39
Цитата Сообщение от Marrex Посмотреть сообщение
style . innerHTML = '#form_ex_ { position: absolute; left: -3000px; transition: 2s;}';
Это что?
Что такое style и что вы засовываете в его innerHTML?

JavaScript
1
2
3
xhr.onreadystatechange = function()
  {
    return_data = xhr.responseText ;
Это событие срабатывает каждый раз при изменении состояния. Но состояния бывают разные.
https://developer.mozilla.org/... ttpRequest
responseText будет иметь какое то осмысленное значение только когда readyState == 4
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
04.08.2024, 20:39
Помогаю со студенческими работами здесь

Не работает смена картинки при наведении
+1 невыходит, подскажите в чем ошибка? Очень интересует этот момент... &lt;tr&gt;&lt;td width=&quot;207&quot;&gt;&lt;td...

Повторная загрузка
Есть код по загрузке файла. &lt;form enctype=&quot;multipart/form-data&quot; action=&quot;check.php&quot; method=&quot;post&quot;&gt; &lt;input type=&quot;hidden&quot;...

Загрузка картинки в PictureBox не работает на других ПК
как сделать так чтобы на других компах работало изминение picture box при mouse leave mouse

Повторная загрузка сцены
Добрый день. Клиент. Есть стартовая сцена. На ней меню. Один из объектов в иерархии - пустой объект с логикой сети. При подключении всех...

Повторная загрузка dll
Всем привет. Имеется dll которую написал сам и подключаю динамически к своему приложению. Подключается хорошо, необходимые данные получаю....


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве
8Observer8 02.02.2026
Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .
Философия технологии
iceja 01.02.2026
На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru