По интернету есть много запросов о том, как загрузить несколько изображений без обновления страницы. Таким образом, был написан простой учебник о том как загрузить несколько изображений с помощью JQuery, Ajax и PHP.

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

Файл index.php:

JavaScript код: Файл содержит некоторые JavaScript и HTML коды. Все коды приведены ниже.

Сначала мы должны включать в себя два внешних файлов JS. Одним из них является минимальным файлом JQuery и другой файл jquery.form.js используется для Ajax формы с отправкой файлов.

Подключаем JavaScript:

Теперь напишем код JavaScript для отправки формы и отображения загруженных изображений.

HTML код:

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

Создайте div с идентификатором цели который определен по указанному выше JavaScript кода. Загруженные изображения будут отображаться на этом div. Также вы можете изменить этот идентификатор DIV, но помните, что целевое значение опции JavaScript (target: ‘# images_preview’) будет то же самое что и div с этим идентификатором.

Файл upload.php

Файл содержит некоторые PHP коды для процесса загрузки и генерирует вид изображения. Есть два способа загрузки и отображения изображения.

1 — Одним из способов является создание папки с именем uploads/. Загруженные изображения будут хранится в этой папке.

2 — Вы можете загружать и отображать изображения без хранятся в папке.

Создание просмотра изображений:

После загрузки изображения, мы должны  генерировать просмотр. Данный просмотр будет отображаться на целевом div’e.

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

Скачать исходник

  • Виталий

    Имеется такой код, при загрузке 2ух и более картинок грузит только 1 картинку 2 и более раз… как это исправить ?

    $value){

    $filename = stripslashes($_FILES[‘photos’][‘name’][$name]);

    $size = filesize($_FILES[‘photos’][‘tmp_name’][$name]);

    //get the extension of the file in a lower case format

    $ext = getExtension($filename);

    $ext = strtolower($ext);

    if(in_array($ext, $valid_formats)){

    if ($size < (MAX_SIZE*1024)){

    $image_name = md5('secretcode'.time()).'.'.$ext;

    echo "»;

    echo »;

    $newname = $uploaddir.$image_name;

    if (move_uploaded_file($_FILES[‘photos’][‘tmp_name’][$name], $newname)){

    $time = time();

    }

    else{

    echo ‘You have exceeded the size limit! so moving unsuccessful! ‘;

    }

    }

    else{

    echo ‘Ой, слишком много фото!‘;

    }

    }

    else{

    echo ‘Ой, это не фотография!‘;

    }

    }

    }

    ?>

    • http://www.c0de-s.net/ Виктор Алексеевич

      Попробуйте использовать цикл foreach.
      И что бы видеть целиком вашу проблему, отправьте на мой майл архив с файлами

  • http://www.c0de-s.net/ Виктор Алексеевич

    Если надо адаптировать код для добавление изображения в базу MySQL, у меня есть решение!

    • http://fliata.com Fliata

      Меня интересует это решение, можете поделится?

      • http://www.c0de-s.net/ Виктор Алексеевич

        Здравствуйте! В место последнего кода, вставить следующий:
        //Generate images view
        if(!empty($images_arr)){ $count=0;
        foreach($images_arr as $image_src){
        #echo $image_src;
        mysql_query(«INSERT INTO imagini (pathimg,id_cat) VALUES (‘$image_src’,’$categ’);»);
        echo $image_src;
        echo ‘ => Success‘;
        }
        }

  • Алексей Коновалов

    Виктор, скажите а как сделать удаление картинок? По одной и сразу.

    • http://www.c0de-s.net/ Виктор Алексеевич

      Зависит как они занесены в базу. Если по одной, то удаляются по полю id_image и физическое удаление картинки с помощи функции unlink().
      На счет массовой удалении, надо смотреть какие поля в таблице.

      • Алексей Коновалов

        Нет Виктор, мне надо сделать удаление картинок из формы пользователем.
        Например по клику.

        • http://www.c0de-s.net/ Виктор Алексеевич

          А где хранит картинки эта форма!?

          • Алексей Коновалов

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

          • http://www.c0de-s.net/ Виктор Алексеевич

            Что у Вас за сайт!? И где форма хранит данные!?

          • http://www.c0de-s.net/ Виктор Алексеевич

            Картинки у Вас скорее всего хранятся в виде base64