Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Javascript удалить картинку

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Javascript удалить картинку
Поиск в теме | Версия для печати
veltony
Отправлено: 16 Декабря, 2013 - 16:29:02
Post Id


Новичок


Покинул форум
Сообщений всего: 49
Дата рег-ции: Апр. 2013  


Помог: 0 раз(а)
Помогите, дополнить скрипт.

Есть скрипт загрузки изображений на сервер, с пред просмотром:

CODE (javascript):
скопировать код в буфер обмена
  1.  
  2.  //alert(0);
  3. function handleFileSelect(evt,list) {
  4.  
  5.     var files = evt.target.files;  
  6. for (var i = 0, f; f = files[i]; i++) {
  7.  
  8.        if (!f.type.match('image.*')) {
  9.         continue;
  10.       };      
  11.     var reader = new FileReader();
  12.      reader.onload = (function(theFile) {
  13.        return function(e) {
  14.          var span = document.createElement('span');
  15.           span.innerHTML = ['<img class="thumb" src="', e.target.result,
  16.             '" title="', escape(theFile.name), '"/>'].join('');
  17.           document.getElementById(list).insertBefore(span, null);
  18.         };
  19.       })(f);
  20.   reader.readAsDataURL(f);
  21.     }
  22.   }
  23. ;
  24.  
  25. document.getElementById('files1').addEventListener('change', function(e){handleFileSelect(e,'list1')}, false);
  26. document.getElementById('files2').addEventListener('change', function(e){handleFileSelect(e,'list2')}, false);
  27. document.getElementById('files3').addEventListener('change', function(e){handleFileSelect(e,'list3')}, false);
  28. document.getElementById('files4').addEventListener('change', function(e){handleFileSelect(e,'list4')}, false);
  29. document.getElementById('files5').addEventListener('change', function(e){handleFileSelect(e,'list5')}, false);
  30.  


Формы для выбора изображений:

CODE (html):
скопировать код в буфер обмена
  1.  
  2. <input name="fileAttach[]" type="file" id="files1"  /><output id="list1"></output>
  3. <input name="fileAttach[]" type="file" id="files2"  /><output id="list2"></output>
  4. <input name="fileAttach[]" type="file" id="files3"  /><output id="list3"></output>
  5. <input name="fileAttach[]" type="file" id="files4"  /><output id="list4"></output>
  6. <input name="fileAttach[]" type="file" id="files5"  /><output id="list5"></output>
  7.  
  8.  


Вот рабочий пример:

http://all-html5[dot]narod[dot]ru/3/vrem11[dot]htm


Проблема в следующем:
Если пользователь в одно из полей загрузил не то изображение, то он должен его как-то удалить и загрузить новое,
в скрипте этой возможности нет.
Если в это-же поле он добавит другое изображение, то старое остается.

Помогите, пожалуйста, дополнить этот скрипт.
Если загружено не то изображение то:
Либо удалить ненужное изображение и загрузить новое.
Либо поверх ненужного изображения загрузить новое, а старое, не должно отображаться.

С ув.
 
 Top
Botkin
Отправлено: 16 Декабря, 2013 - 18:50:09
Post Id


Новичок


Покинул форум
Сообщений всего: 31
Дата рег-ции: Нояб. 2013  


Помог: 0 раз(а)
Тебе нужно в момент появления превью генерировать кнопочку "удалить" для каждого изображения, например както так:
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. var reader = new FileReader();
  3.      reader.onload = (function(theFile) {
  4.        return function(e) {
  5.          var span = document.createElement('span');
  6.           span.innerHTML = ['<img class="thumb" src="', e.target.result,
  7.             '" title="', escape(theFile.name), '"/><a class="delete" href="#">Удалить</a>'].join('');
  8.           document.getElementById(list).insertBefore(span, null);
  9.         };
  10.       })(f);
  11.  


А далее пишешь скриптик, который по нажатию на .delete удаляет превью и хидден. Как к ним обратиться и как удалить из хтмл - гугл подскажет, там ниче военного ))

(Отредактировано автором: 16 Декабря, 2013 - 18:51:07)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB