Ajax выгрузка изображения без перезагрузки страницы на jQuery

Если вы ищите рабочий Ajax скрипт выгрузки файлов/изображений без перезагрузки страницы на jQuery, то вы попали куда надо.

Скрипт релизован с помощью Ajax формы из плагина jquery.form и PHP кода для выгрузки изображений. В результате всего несколько строчек JavaScript кода и выгрузка готова. По этому поводу вы можете посмотреть реклама в интернете

Пример Скачать (.zip, 52.1 Кб)

JavaScript

В коде $("#photoimg").live('change',function(){}) photoimg является именем ID элемента INPUT, а в $('#imageform').ajaxForm() imageform является именем ID элемента FORM. С помощью метода ajaxForm(), при изменении INPUT происходит вызов и принятие элемента FORM без перезагрузки страницы.

index.php

Содержит простой PHP и HTML код. Стоит отметить $session_id=1. Это означает, что значение сессии пользователя равно 1.

Теперь создадим базу данных пользователей.

Пользователи

Содержит следующие данные: username, password, email, profile_image и profile_image_small и т.д.

Если вы захотите не много отвлечься от темы Ajax выгрузки и немного отдохнуть/поиграть, то я могу порекомендовать вам следующий ресурс игры на samsung galaxy s2, где найдете разнообразные игры для этого смартфона. Отдохнули? Поехали дальше...

ajaximage.php

Содержит PHP код. Этот скрипт загружает изображения в папку на сервере. Имя файла изображения будет переименовано в timestamp+session_id.extention (метка времени+пользовательский id).

Вроде все.

Пример Скачать (.zip, 52.1 Кб)


3 комментарий на “Ajax выгрузка изображения без перезагрузки страницы на jQuery

  1. Спасибки, все работает

    Единственное надо убрать запятую перед закрывающейся скобкой в sql-запросе на создание таблицы users. Иначе запрос выдает ошибку.

    Thumb up 0 Thumb down 0

  2. А не посоветуете где посмотреть скриптик со следующим функционалом:

    При загрузке создание превью, оригинал и превью в указанные папки, после загрузки вывод изоброжения и кода для него (превью + ссылка на оригинал)

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

    Thumb up 0 Thumb down 0

Оставить комментарий