Загрузка картинок с помощью jQuery и PHP

JavaScript
Многие интересуются как сделать загрузку картинок на сервер, без перезагрузки страницы и с предварительным просмотром загруженного изображения. Сегодня это совсем не сложно, все что вам понадобится, небольшие знания в PHP и стандартная библиотека jQuery Form.
Давайте приступим к написанию нашего загрузчика и разберем все по полочкам.


Для начала давайте создадим .html страницу и добавим в нее саму форму загрузки и конечно же подключим jQuery
<html>
    <head>
        <title>Загрузка файлов на сервер PHP и jQuery. Scriptland.com.ua</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="/js/jquery.form.js"></script>

    </head>
<body>
    <form id="formUpload" method="post" enctype="multipart/form-data" action="/upload.php">
        <input type="file" name="file" id="file" />
        <div id="preview"></div>
    </form>

</body>
</html>


Не забудьте скачать jQuery Form malsup.com/jquery/form/#tab7

Так же добавляем на страницу скрипт, который в свою очередь будет выводить на странице процесс загрузки и соответственно саму картинку.
ВНИМАНИЕ!!! Старая версия скрипта
jQuery в новых версиях не поддерживает функцию .live()ее альтернатива .on().
<script type="text/javascript">
        // Загружаем файл
        $(document).ready(function() { 
            $('#file').live('change', function() { 
                $("#preview").html(''); // чистим preview
                $("#preview").html('<img src="load.gif" alt="JavaScript: Загрузка картинок с помощью jQuery и PHP" />'); //показываем картинку загрузки
                $("#formUpload").ajaxForm({
                    target: '#preview'
                }).submit();
            });
        }); 
    </script>

Новая функция jQuery с on()
<script type="text/javascript">
        // Загружаем файл
        $(document).ready(function() { 
            $(document).on('change', '#file', function() { 
                $("#preview").html(''); // чистим preview. Кстати я не знаю для чего его чистить, следующая строка его сама подчистит. 
                $("#preview").html('<img src="load.gif" alt="JavaScript: Загрузка картинок с помощью jQuery и PHP" />'); //показываем картинку загрузки
                $("#formUpload").ajaxForm({
                    target: '#preview'
                }).submit();
            });
        }); 
    </script>


Теперь нам нужно принять файл и обработать его должным образом, а так же переместить его в отведенную для файлов директорию на сервере. Для этого создаем файл upload.php со следующим содержимым
<?php
        define('UPLOAD_FILE', 'upload/images/');
        $valid_formats = array("jpg", "png", "gif","jpeg"); // допустимые форматы
        
            if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") // пришел запрос
            {
                $name = $_FILES['file']['name'] ; // имя файла
                $size = $_FILES['file']['size'] ; // размер файла
                if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name) ; // разбиваем на имя и формат
                    if(in_array($ext,$valid_formats))    // смотрим формат такой как мы разрешили?!
                    {
                        if($size < (1024 * 1024 * 1024)) // Ограничиваем размер файла в 1MB
                         {   
                         $actual_image_name = time() . "." . $ext ; // задаем уникальное имя файлу
                         $tmp = $_FILES['file']['tmp_name'];
                        if(move_uploaded_file($tmp, UPLOAD_FILE . '/' . $actual_image_name)) // переносим файл с tmp в наш каталог
                         {
                            echo "<img src=\"" . UPLOAD_FILE . "/{$actual_image_name}\" class=\"preview\" alt="JavaScript: Загрузка картинок с помощью jQuery и PHP" /> "; // показываем превьюшку
                            User::UploadUserAvatar($UserId, $username, $actual_image_name) ;
                         }
                        else echo "Ошибка. =(";
                         }
                        else echo "Максимальный размер файла не должен превышать 1MB"; 
                    }
                    else echo "Допустимые форматы: jpg|jpeg|png|gif)"; 
                }
                else die("Пожалуйста выберите изображение!") ;
            }
?>

И так, теперь давайте рассмотрим написанный код, что и зачем он вобще нужен.
Начнем с
define('UPLOAD_FILE', 'upload/images/');


Тут мы определяем переменную UPLOAD_FILE и назначаем ей путь для загрузки файла. Думаю тут все просто и понятно
Далее
$valid_formats = array("jpg", "png", "gif","jpeg");


Прежде чем грузить файлы на сервер нам нужно будет проверить их расширение, ведь могут кроме изображений залить что то еще, например .php файл c шелом или еще что то.
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")


если приняли пост запрос и он не пустой, тогда выполняем скрипт
$name = $_FILES['file']['name'] ; // имя файла
$size = $_FILES['file']['size'] ; // размер файла


Определяем переменные с название файлы и его размером
if(strlen($name))


Проверяем, передали ли нам файл

20 комментариев

avatar
Здравствуйте! Установил скрипт, но пишет что: Fatal error: Class 'User' not found in. Не находит класс, наверное у вас ошибка, исправьте!
avatar
все норм, это просто сохранение картинки в базу данных, в таблицу юзера, просто строку нужно эту убрать и все
avatar
Спасибо, заработало, немного переделал. В общем тот скрипт что мне надо, много перепробовал — не подошли.
avatar
=) не за что
avatar
Кстати, написано в коде 1024 * 10 * 1024, то как бы 10 мб? А то пишу сайт, и не знаю в чем тут величина
avatar
1024 это байты
  • admin
  • 0
  • ↓
avatar
Тогда если надо сделать 10, то 1024 * 10 * 1024? Если интересно, то мой сайт: uponplay.com
avatar
тип того, на счет сайте я бы порекомендовал на фреймворк ставить систему, все же будет более надежнее и приятнее работать с ним.
avatar
Да зачем фраймворк, это то же что и конструктор, похож на тот же Юкоз, лучше самому. От мой минус что JS плохо знаю, хоть PHP хорошо знаю.
avatar
ну на счет конструктора да, я раньше тоже писал все сам, да и разобраться нужно было в некоторых моментах, все таки навык приходит в то время когда не понимаешь как что либо сделать, а после того как это будет сделано, то уже вобщем не забудется.
Я сейчас обычно мелкие проекты на своем коде пишу, а вот что то посолиднее, так на фрейм сажаю, да и безопаснее это, ну и позволяет избежать изобретение велосипеда. Тут конечно еще играет важную роль сам фреймворк, мне по душе, чем проще тем лучше, чем меньше файлов и кода, тем лучше, а то открыл тут как то yii, глянув внутрь и понял, что его то уже точно юзать не буду!
avatar
Все таки солидней, когда сам написан с нуля, его и продвинуть легче.
avatar
Админ, помоги пожалуйста. Сделал все как в этой статье, не хочет работать. вот код:
avatar
index.php

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="/scripts/jquery.form.js"></script>
                <script type="text/javascript">
        $(document).ready(function() {
            $('#file').live('change', function() {
                $("#preview").html(''); // чистим preview
                $("#preview").html('загружаем.'); //показываем картинку загрузки
                $("#formUpload").ajaxForm({
                    target: '#preview'
                }).submit();
            });
        });
    </script>
    </head>
<body>
    <form id="formUpload" method="post" enctype="multipart/form-data" action="/upload.php">
        <input type="file" name="file" id="file" />
        <div id="preview"></div>
    </form>

</body>
</html>
avatar
upload.php

<?php
        define('UPLOAD_FILE', 'upload/img/');
        $valid_formats = array("jpg", "png", "gif","jpeg"); // допустимые форматы

            if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") // пришел запрос
            {
                $name = $_FILES['file']['name'] ; // имя файла
                $size = $_FILES['file']['size'] ; // размер файла
                if(strlen($name))
                {
                    list($txt, $ext) = explode(".", $name) ; // разбиваем на имя и формат
                    if(in_array($ext,$valid_formats))    // смотрим формат такой как мы разрешили?!
                    {
                        if($size < (1024 * 1024 * 1024)) // Ограничиваем размер файла в 1MB
                         {
                         $actual_image_name = time() . "." . $ext ; // задаем уникальное имя файлу
                         $tmp = $_FILES['file']['tmp_name'];
                        if(move_uploaded_file($tmp, UPLOAD_FILE . '/' . $actual_image_name)) // переносим файл с tmp в наш каталог
                         {
                            echo "<img src=\"" . UPLOAD_FILE . "/{$actual_image_name}\" class=\"preview\" /> "; // показываем превьюшку
                         }
                        else echo "Ошибка.";
                         }
                        else echo "Максимальный размер файла не должен превышать 1MB";
                    }
                    else echo "Допустимые форматы: jpg|jpeg|png|gif)";
                }
                else die("Пожалуйста выберите изображение!") ;
            }
?>
avatar
Все что происходит, это только выводится
$("#preview").html('загружаем.');

И дальше ничего. upload/img/ существует, jquery.form.js подключил
avatar
пропиши абсолютные пути до папки upload/img.
И еще на странице должен быть 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

и именно этой версии, а не новый, в новом jquery.min функция .live не работает, ее нужно на .on переделывать.
Скачай плагин jquery.form.min.js malsup.com/jquery/form/#download
  • admin
  • 0
  • ↓
avatar
Я с JQuery практически не работал. На сколько понимаю в данном скрипте при выборе файла должна показываться превюшка. У меня это не происходит. Ваш код взял один к одному. Где что не так?
avatar
ребят, проверяйте работоспособность скрипта следующим образом:
Создали файл test.php
Закинули в него код php приведенный в примере выше.
Разместили HTML форму на странице приведенную выше, но в нее перед 
</form>

добавили кнопку submit
<input type="submit" value="Отправить">

При этом JS
$(document).ready(function() {
            $('#file').live('change', function() {
                $("#preview").html(''); // чистим preview
                $("#preview").html('загружаем.'); //показываем картинку загрузки
                $("#formUpload").ajaxForm({
                    target: '#preview'
                }).submit();
            });
        });

НЕ подключаем.
Жмакаем по кнопку Отправить, если видим картинку, то код рабочий, если нет, выдаст ошибку или напишет что то, здесь в коде проверок больше исполняемого кода xD
Если картинка видна, но при подключении скрипта ее нет. Значит проблема в библиотеке, а точнее в том что новые версии jQuery не поддерживают .live(), нет там такой функции, вместо .live(), нужно использовать .on()

ПС. У себя проблем не наблюдал!
avatar
Извините совсем неправильно я поставил вопрос. В коде $("#preview").html('JavaScript: Загрузка картинок с помощью jQuery и PHP'); //показываем картинку загрузки, а хотелось бы не показывать load.gif, а именно ту картинку которую выбрал бзер и желательно смашщтабированую до определнного размера.
avatar
Тут я уже пасс, я с jQuery не особо, моих знаний не хватить написать такую фичу.
Да и в данном примере она ни к чему, так как при выборе картинки она сразу же загружается и после загрузки выводится в preview вместо load.gif
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.