Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.83/6: Рейтинг темы: голосов - 6, средняя оценка - 4.83
12 / 4 / 2
Регистрация: 10.02.2011
Сообщений: 50
1

Превью изображений - при отправке формы данных в массивах $_POST и $_FILES нет

06.11.2015, 17:12. Показов 1161. Ответов 5
Метки нет (Все метки)

Доброго времени суток. Пытаюсь разобраться с превьюшкой загружаемых изображений. Код на сколько я знаю рабочий, но вот при отправке формы данных в массивах $_POST и $_FILES нет. Что может быть не так? Прошу, помогите разобраться.
Вот код:
HTML5
1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="ru-RU"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta charset="utf-8">
  <style>
 </style>
</head>
<body>
PHP
1
2
3
4
<?php
    echo var_dump($_POST), "<br />";
    echo var_dump($_FILES), "<br />";
?>
HTML5
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
 <div class="wrapper">
 
    <form method="POST" enctype="multipart/form-data">
      <label for="name">Имя:</label>
      <input id="name" name="name" value="вап" maxlength="150" autofocus="" required="" type="text">
      <p class="description">Напишите своё имя.</p>
 
      <label for="email">Email:</label>
      <input id="email" name="email" value="fg@gdfg" maxlength="256" required="" type="email">
      <p class="description">Напишите свой адрес электронной почты.</p>
 
      <label for="image">Фотография:</label>
      <input id="image" name="image" accept="image/*" multiple="" type="file">
      <div class="preview"></div>
      <p class="description">Подходящие форматы для фотографии: PNG, JPG, GIF.</p>
 
      <label for="message">Сообщение:</label>
      <textarea id="message" name="message" rows="7" cols="40" required=""></textarea>
 
      <p>
        <button disabled="disabled" type="submit">Отправить</button>
        <small>все поля обязательны для заполнения</small>
      </p>
 
      <progress value="0" max="100" class="hidden"></progress>
    </form>
 
    <output name="echo" class="hidden"></output>
 
  </div>
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
 <script>
  (function(window, document) {
 
    var form     = document.querySelector('form'),
        dropzone = form.parentNode,
        submit   = form.querySelector('[type=submit]'),
        support  = window.FormData && window.File && window.FileList && window.FileReader,
        preview  = document.querySelector('.preview'),
        progress = document.querySelector('progress'),
        echo     = document.querySelector('output'),
        queue    = [],
 
    previewImages = function(files) {
      [].forEach.call(files, function(file) {
        if (file.type.match(/image.*/)) {
          var reader = new FileReader();
 
          reader.onload = function(event) {
            var exist = [].some.call(preview.querySelectorAll('img'), function(element) {
              return element.src == event.target.result;
            });
 
            if (!exist) {
              var img = document.createElement('img');
              img.src = event.target.result;
 
              img.onclick = function() {
                removePreview(img);
              };
 
              preview.appendChild(img);
 
              queue.push({file: file, element: img});
              checkValidity();
            }
          };
 
          reader.readAsDataURL(file);
        }
      });
    },
 
    removePreview = function(element) {
      queue = queue.filter(function(file) {
        return file.element != element;
      });
 
      element.parentNode.removeChild(element);
      checkValidity();
    },
 
    checkValidity = function() {};
 
    if (form.checkValidity) {
      checkValidity = function() {
        submit.disabled = !(form.checkValidity() && queue.length > 0);
      };
    };
 
    if (window.localStorage) {
      var elements = form.querySelectorAll('[name]'),
          length = elements.length,
          i;
 
      for (i=0; i<length; i++) {
        (function(element) {
          var name = element.getAttribute('name');
 
          if (name != 'image') {
            element.value = localStorage.getItem(name) || '';
 
            element.onkeyup = function() {
              var value = element.value;
              if (!value) {
                value = '';
              }
 
              localStorage.setItem(name, value);
              checkValidity();
            };
          }
        })(elements[i]);
      }
    }
 
    if (support) {
      form.querySelector('[type=file]').addEventListener('change', function() {
        previewImages(this.files);
        this.value = '';
      }, false);
 
      dropzone.addEventListener('dragover', function(event) {
        event.preventDefault();
 
        dropzone.classList.add('active');
        event.dataTransfer.dropEffect = 'copy';
      }, false);
 
      dropzone.addEventListener('drop', function(event) {
        event.preventDefault();
 
        dropzone.classList.remove('active');
        previewImages(event.dataTransfer.files);
      }, false);
    }
 
    checkValidity();
 
    form.onsubmit = function(event) {
      submit.disabled = true;
      submit.value = 'Отправляется...';
 
      if (window.localStorage) {
        localStorage.removeItem('message');
      }
 
      if (support) {
        event.preventDefault();
 
        var data = new FormData(form),
            xhr  = new XMLHttpRequest();
 
        queue.forEach(function(element) {
          data.append('image', element.file);
        });
 
        progress.classList.remove('hidden');
        xhr.open(form.getAttribute('method'), form.getAttribute('action'));
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
 
        xhr.upload.addEventListener('progress', function(event) {
          if (event.lengthComputable) {
            progress.value = Math.round((event.loaded * 100) / event.total);
          }
        }, false);
 
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            if (xhr.status == 200) {
              var message = JSON.parse(xhr.responseText);
 
              if (message.result) {
                echo.innerHTML = message.body;
                echo.classList.remove('hidden');
              } else {
                alert('Error parsing JSON');
              }
            } else if (xhr.status == 413) {
              alert('Большой объём файлов для демонстрации. Извините :)');
            }
 
            var textarea = form.querySelector('textarea');
            textarea.value = '';
            textarea.focus();
 
            progress.classList.add('hidden');
            progress.value = 0;
 
            queue = [];
            preview.innerHTML = '';
 
            submit.value = 'Отправить';
            checkValidity();
          }
        };
 
        xhr.send(data);
      }
    };
 
  })(window, document);
  </script>
HTML5
1
</body></html>
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
06.11.2015, 17:12
Ответы с готовыми решениями:

При отправке формы в выводе $_POST в массиве я вижу не все поля формы
подскажите, в чем дело. или для обработки полей типа &quot;file&quot; (которого нет в массиве) нужны особые...

Получить $_FILES при отправке AJAX
Всем привет не знаю не ошибся ли я разделом, но попробую тут спросить, как отправить с помощью ajax...

Как при отправке формы добавить текущего пользователя сессии в таблицу данных формы
вывод логина юзера, может поможет &lt;?php &lt;?php // Проверяем, пусты ли переменные логина и id...

Кодировка при отправке данных формы
Помогите, пожалуйста, решить проблему. При отправке данных формы на e-mail посредством php, вместо...

5
1933 / 1762 / 822
Регистрация: 23.01.2014
Сообщений: 6,205
06.11.2015, 19:03 2
tupik123,

1. В Вашем сообщении 170 строчек Javascript-кода, 40 строк html-разметки и всего 2 строки PHP-кода. При всем этом Вы решили что проблема именно в PHP?
2. У формы должен быть задан атрибут action, он должен ссылаться на скрипт-обработчик. Это следует из строчки:
Javascript
1
xhr.open(form.getAttribute('method'), form.getAttribute('action'));
Иначе запрос перенаправляется на /null. Естественно у Вас нет такого пути на сайте, поэтому форма вообще никуда не отправляется. Вы можете сами это увидеть. В google chrome Нажмите ctrl+shift+I (убедитесь что открыта вкладка Console) и попробуйте отправить форму. Появится javascript-ошибка.
Цитата Сообщение от tupik123 Посмотреть сообщение
Код на сколько я знаю рабочий
На сколько я знаю - нет.
0
12 / 4 / 2
Регистрация: 10.02.2011
Сообщений: 50
06.11.2015, 21:04  [ТС] 3
Цитата Сообщение от pav1uxa Посмотреть сообщение
У формы должен быть задан атрибут action
По умолчанию он ссылается сам на себя или я не прав?
Цитата Сообщение от pav1uxa Посмотреть сообщение
На сколько я знаю - нет.
Да он ругается на эту строчку:
Цитата Сообщение от tupik123 Посмотреть сообщение
var message = JSON.parse(xhr.responseText);
, как я понимаю ответ приходит не тот? Но почему?
0
1933 / 1762 / 822
Регистрация: 23.01.2014
Сообщений: 6,205
06.11.2015, 21:09 4
Лучший ответ Сообщение было отмечено tupik123 как решение

Решение

Цитата Сообщение от tupik123 Посмотреть сообщение
По умолчанию он ссылается сам на себя или я не прав?
По умолчанию да. Но Вы видимо совершенно не представляете что делает этот Javascript-код. Зачем тогда вставлять его мне не понятно.
Цитата Сообщение от tupik123 Посмотреть сообщение
как я понимаю ответ приходит не тот? Но почему?
Так а Вы и не даете никакого специального ответа для javascript. Он обращается по ссылке, указанной в action формы. В результате он ожидает данные в формате json. Вы их нигде не выдаете ему...
1
12 / 4 / 2
Регистрация: 10.02.2011
Сообщений: 50
08.11.2015, 10:06  [ТС] 5
Цитата Сообщение от pav1uxa Посмотреть сообщение
Вы видимо совершенно не представляете что делает этот Javascript-код. Зачем тогда вставлять его мне не понятно.
1. Мне необходимо, что-бы работала превью загружаемых изображений.
2. Этот код это делает (всякие там проверки валидации и кеширование нас не интересует).
3. После заполнения формы нажимаем сабмит и все данные перенаправляются в файл обработчик.
4. Идет обработка на php. (B что тут происходит? Что можно делать, а чего нельзя, как и какой вернуть результат в наш вызывающий скрипт?)
Всё. Это мне нужно. И
Цитата Сообщение от pav1uxa Посмотреть сообщение
он ожидает данные в формате json
- как мне это сделать на сервере?

Добавлено через 10 часов 57 минут
Всё, господа разобрался.
На сервере нужен только обработчик и в случае удачной обработки вернуть что-то вроде:
PHP
1
2
3
<?php 
echo json_encode(array('result'=>true, 'body'=>'Тут наш результат'));
?>
Респект за ответ pav1uxa.
1
12 / 4 / 2
Регистрация: 10.02.2011
Сообщений: 50
15.11.2015, 06:13  [ТС] 6
Сталкнулся ещё с одной проблемой. Вот этот кусок кода:
Javascript
1
2
3
4
5
6
        var data = new FormData(form),
            xhr  = new XMLHttpRequest();
 
        queue.forEach(function(element) {
          data.append('image', element.file);
        });
Должен сохранять в форме наши картинки.
Но на стороне сервера я могу вытянуть только одну, последнюю выбранную:
PHP
1
2
3
foreach($_FILES['image'] as $i) {
    $Body .= "{$i}<br />";
}
Возможно я не правильно обрабатываю массив?
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
15.11.2015, 06:13

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

Ошибка при отправке данных с формы
Кто может уделить время и немножко помочь? В ПП)

Ошибка при отправке данных с формы
Добрый день. Начал питон, дошел до обработки данных с формы, следующий код: views.py: def...

Ошибка при отправке данных формы
Задача: Отправить данные из формы без перезагрузки страницы Решение: Оправляю данные из формы...

Ошибка 500 при отправке данных формы
Всем привет) Делаю небольшой сайт на wordpresse. На нем имеется небольшая всплывающая форма,...


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

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

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