Блог

Я раньше не часто использовал javascript, и я тоже не очень хороший программист на php, если подумать, но я пытаюсь учиться, создавая небольшой веб-сайт.

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

(Я думаю) Я знаю, как заставить его работать нормально, но мне интересно, как это работает. Кто-нибудь хочет быстро взглянуть на него и рассказать мне, что делает весь код в файле js и php?

Я был бы очень признателен 🙂

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

Далее:

1. ajaxUpload вызывается одной из кнопок в форме загрузки.
2. ajaxUpload сначала убедитесь, что все аргументы функции верны, создавая окно предупреждения (!), Если с одним из них возникает проблема. (Было бы лучше выдать ошибку, используя throw "error message" вместо этого.)
3. ajaxUpload затем создает iframe с использованием document.createElement и присваивает ему нулевую ширину и высоту, чтобы он был невидимым, прежде чем добавлять его в документ. Он дает iframe имя ajax-temp .
4. ajaxUpload добавляет doUpload функцию в качестве onload слушателя в iframe. Он использует addEvent функцию как кроссбраузерный способ сделать это.
5. Затем ajaxUpload устанавливает атрибут вызывающей формы target так, чтобы он указывал на iframe, используя имя, которое он дал iframe ранее. Это приводит к отправке формы в iframe вместо замены текущей страницы. Функция также устанавливает некоторые другие атрибуты в форме, хотя, вероятно, было бы лучше добавить эти атрибуты в исходный код HTML, а не из Javascript.
6. Наконец, ajaxUpload отправляет форму с помощью form.submit() .
7. Браузер отправляет форму на сервер, вызывая ajaxupload.php запуск.
8. Сначала ajaxupload.php скрипт проверяет, действительно ли браузер отправил файл (на случай, если любопытный пользователь посетил URL вручную вместо отправки формы), затем вызывает uploadImage функцию с набором параметров, которые он получил от $_REQUEST объекта.
9. uploadImage выполняет множество проверок аргументов, которые он получает от клиента, чтобы убедиться, что файл не слишком большой, имеет правильное расширение и т. Д. Если все проверки пройдены, изображение сохраняется и возвращается имя файла, в котором было сохранено изображение. В противном случае он возвращает список ошибок.
10. Если результат, возвращаемый с помощью uploadImage , не является массивом ошибок, скрипт возвращает сообщение об успешном завершении и <img> тег, в котором он src установлен на URL изображения. В противном случае он возвращает сообщение об ошибке.
11. На клиенте возврат сообщения об успешном завершении или ошибке вызывает load срабатывание события в iframe. doUpload Вызывается функция, которая зарегистрирована как прослушиватель.
12. doUpload удаляет себя в качестве слушателя из iframe и запускает некоторый код javascript в контексте iframe, устанавливая атрибут src iframe. Этот код копирует содержимое iframe на родительскую страницу.
13. Наконец, doUpload удаляет iframe из документа, ожидая некоторое время в некоторых браузерах.

Фух, это, конечно, заняло некоторое время, чтобы написать.