|
|
Регистрация Восстановить пароль |
Регистрация | Задать вопрос |
Заплачу за решение |
Новые сообщения |
Сообщения за день |
Расширенный поиск |
Правила |
Всё прочитано |
|
|
Опции темы | Поиск в этой теме |
03.11.2015, 11:58 | #1 |
Пользователь
Регистрация: 06.05.2010
Сообщений: 32
|
Помогите понять код
Доброго времени суток. Пытаюсь сделать upload для своего сайта, нашёл то что мне надо. Но не могу разобраться в коде. Здесь много лишнего. А я в js не шарю. Помогите пожалуйста понять что тут надо, а что можно выкинуть...
Код HTML:
<!DOCTYPE html> <html lang="ru-RU"><head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta charset="utf-8"> </head> <body> <form method="POST" enctype="multipart/form-data"> <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> <button disabled="disabled" type="submit">Отправить</button> </form> <output name="echo" class="hidden"></output> <script> (function(window, document) { var form = document.querySelector('form'), submit = form.querySelector('[type=submit]'), support = window.FormData && window.File && window.FileList && window.FileReader, preview = document.querySelector('.preview'), 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); } 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); }); xhr.open('post', '/temp/echo?t=' + (new Date()).getTime()); // xhr.open(form.getAttribute('method'), form.getAttribute('action')); xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest'); 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(); queue = []; preview.innerHTML = ''; submit.value = 'Отправить'; checkValidity(); } }; xhr.send(data); } }; })(window, document); </script> </body></html> |
03.11.2015, 12:06 | #2 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
И что по-твоему тут лишнее?
ИМХО, код замечательный, все к месту и по делу, даже у себя юзану кое-что, пожалуй.
Alar, верни репу!
|
03.11.2015, 12:09 | #3 |
Пользователь
Регистрация: 06.05.2010
Сообщений: 32
|
|
03.11.2015, 13:15 | #4 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Превью и асинхронная передача файлов, еще есть намек на кеширование заполненной формы, но частично вырезано, так что можно не обращать внимания.
Alar, верни репу!
|
03.11.2015, 13:32 | #5 |
Пользователь
Регистрация: 06.05.2010
Сообщений: 32
|
А где, что? Если только превьюшку оставить без кеширования, то что надо вырезать (мне как бы модуль отдельный надо на загрузку, что бы я его в любом месте подключить мог без лишнего кода)? И почему после сабмита нет данных в массиве $_POST?
|
03.11.2015, 20:42 | #6 | ||
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Код действительно очень хорош, тут я редко такое вижу, так что откомментил его.
Цитата:
Цитата:
Alar, верни репу!
|
||
03.11.2015, 20:43 | #7 | |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Цитата:
Код:
Alar, верни репу!
|
|
03.11.2015, 20:44 | #8 |
Раздолбайских Дел
Старожил
Регистрация: 22.05.2009
Сообщений: 3,828
|
Код:
Alar, верни репу!
|
04.11.2015, 03:52 | #9 | |
Пользователь
Регистрация: 06.05.2010
Сообщений: 32
|
Спасибо, я вечером сегодня посмотрю.
Кстати если убрать не нужные 3 строчки, то это как-то на работу кнопку формы влияет. Цитата:
Сразу говорю, что event.preventDefault(); закоментил. Где-то он сбрасывает значение? Или вообще его не отправляет? При вызове var_dump($_FILES); Результат: erarray(1) { ["image"]=> array(5) { ["name"]=> string(0) "" ["type"]=> string(0) "" ["tmp_name"]=> string(0) "" ["error"]=> int(4) ["size"]=> int(0) } }. Т.е. и информация о файлах тоже не передаётся. Почему он ругается на эту строчку при отправке формы? Код:
Последний раз редактировалось Stilet; 15.11.2015 в 10:50. |
|
07.11.2015, 03:58 | #10 | |
Форумчанин
Регистрация: 15.02.2012
Сообщений: 821
|
Цитата:
Но поскольку все упорно думают, что на этом форуме сидят экстрасенсы, то постараюсь оправдать ожидания и назову три причины, на каждую из которых интерпретатор может жаловаться: - `xhr.responseText` не является JSON-форматом; - `xhr` не существует в контексте; - вместо вменяемого интерпретатора используется какой-то динозавр, который не знает объект `JSON`. Ну и добавлю ещё уж совсем извращённое: - Объект `JSON` был переопределён на другой объект, не имеющий метода `parse`.
^-.-^ My GitHub
Последний раз редактировалось Fenex; 07.11.2015 в 04:04. |
|
|
Похожие темы | ||||
Тема | Автор | Раздел | Ответов | Последнее сообщение |
Как понять данный код? | SkyWay | Microsoft Office Excel | 1 | 12.02.2015 02:36 |
Помогите понять код (прокомментировать код шифрации на C++). | bicks | Помощь студентам | 3 | 10.12.2013 21:31 |
Как понять код | Lepton | Visual C++ | 1 | 13.01.2012 17:56 |
Помогите понять код | Arassir | JavaScript, Ajax | 1 | 12.05.2009 13:00 |
Помогите понять код | MaGiCeYe | Помощь студентам | 1 | 02.04.2007 19:57 |