Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/9: Рейтинг темы: голосов - 9, средняя оценка - 5.00
48 / 48 / 14
Регистрация: 25.03.2013
Сообщений: 771
1

Создание превью изображений

03.02.2014, 13:35. Просмотров 1750. Ответов 4
Метки нет (Все метки)


Наткнулся на такой скрипт, создает превью изображений как добиться чтобы под каждой превью была кнопка удалить и удаляла превью?
Вот рабочий вариант
PHP/HTML
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
<html>
<head>
<title>Ajax Image Upload </title>
<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
 
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
 
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
 
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>
 
<body>
 
 
</body>
</html>
Добавлено через 14 минут
Все хорошо но опять explorer скотина не поддерживает.

Добавлено через 1 час 14 минут
вот добился чтобы появлялась ссылка удалить с каждой превьюшкой что как удалить не знаю

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
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
 
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
 
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
          
          document.getElementById('list').insertBefore(span, null);
          
          var span = document.createElement('span');
          span.innerHTML = ['<a href="',e.target.result,'" >Удалить</a>'].join('');
           document.getElementById('list').insertBefore(span, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>
0
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
03.02.2014, 13:35
Ответы с готовыми решениями:

Загрузчик изображений с превью на HTML5. Превью без загрузки
Здравствуйте, уважаемые! Есть острая необходимость создать на сайте возможность загружать...

Множественное превью загружаемых изображений
Как можно задействовать пред просмотр всех загружаемых фотографий, сейчас например если выбрать...

Выбор изображений для загрузки и их превью
Недавно решил перейти на multiple input file, но после этого возникли проблемы со скриптом. До...

Загрузка изображений с превью и последующей загрузкой на сервер
Добрый день! Понадобилось соорудить именно такую функцию: есть форма с данными (имя, город,...

__________________
Помогаю в написании курсовых работ и дипломов здесь.
Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
4
73 / 70 / 37
Регистрация: 10.09.2011
Сообщений: 169
03.02.2014, 21:41 2
Максим1889,
Имя у переменных одинаковым быть не должно.
Касательно проблемы. Есть функция remove() и воспользоваться тут лучше ей. Этот код:
Javascript
1
2
3
4
5
6
7
8
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
          
          document.getElementById('list').insertBefore(span, null);
          
          var span = document.createElement('span');
          span.innerHTML = ['<a href="',e.target.result,'" >Удалить</a>'].join('');
           document.getElementById('list').insertBefore(span, null);
Замените на:
Javascript
1
2
3
4
5
6
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" id="thumb', i, '" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
          var del = document.createElement('span');
          del.innerHTML = ["<a href=\"#\" onclick=\"$('#thumb", i, "').remove(); $(this).remove();\" >Удалить</a>"].join('');
           document.getElementById('list').insertBefore(del, null);
0
48 / 48 / 14
Регистрация: 25.03.2013
Сообщений: 771
03.02.2014, 22:07  [ТС] 3
сделал как сказали но превью изображений все равно не удаляет

PHP/HTML
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
<html>
<head>
<title>Ajax Image Upload </title>
<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>
 
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
 
    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {
 
      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }
 
      var reader = new FileReader();
 
      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
         var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" id="thumb', i, '" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
          var del = document.createElement('span');
          del.innerHTML = ["<a href="#" onclick="$('#thumb", i, "').remove(); $(this).remove();" >Удалить</a>"].join('');
           document.getElementById('list').insertBefore(del, null);
        };
      })(f);
 
      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }
 
  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>
 
<body>
 
 
</body>
</html>
 Комментарий модератора 
Для оформления разметки, содержащей javascript используйте тег [PHPHTML]!
0
73 / 70 / 37
Регистрация: 10.09.2011
Сообщений: 169
04.02.2014, 00:41 4
Максим1889, потому что библиотека jQuery не подключена. remove() - это её функция.
1
48 / 48 / 14
Регистрация: 25.03.2013
Сообщений: 771
04.02.2014, 07:20  [ТС] 5
На сколько я понимаю тут путь к изображению. Каким образом мне теперь его загрузить на сервер.
Javascript
1
', e.target.result,'
Тоесть как засунуть это переменную в

PHP
1
$_FILES['photos']['name']
Сам метод загрузки на чистом php мне известен. но как здесь поступить?

Добавлено через 1 минуту
Да и как бы поступили с explore. писать для него отдельный скрипт?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
04.02.2014, 07:20

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь или здесь.

Ajax массовая загрузка изображений на сервер с превью
Умные люди помогите, есть форма отправки изображений но не работает, что нужно изменить в php что...

Превью изображений
Как правильно уменьшить изображения в html по минимуму прибегая к javascript и css? У меня превью...

Работа с превью изображений
Делаю превьюхи в фотогалерее. Сначала imagecopyresized а потом вывожу через imagejpeg. На локальном...

Превью изображений в ASP
Люди, подсобите! У меня есть некоторая анкетная форма которую можно заполнить и которая...


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

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.