Пишем загрузку изображения на php+ajax+jquery+jquery.form

Пишем загрузку изображения на php+ajax+jquery+jquery.form

Для начала делаем форму upload.html (в контейнере preview будет показываться миниатюрка):

<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
Загрузить пикчу <input type="file" name="photoimg" id="photoimg" /><div id='preview'></div>
</form>

Моторчик который обрабатывает форму ajaximage.php:

<?php
$path = "uploads/"; // куда заливаем

$valid_formats = array("jpg", "png", "gif", "bmp","jpeg"); // допустимые форматы

if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") // пришел запрос
{
    $name = $_FILES['photoimg']['name']; // имя файла
    $size = $_FILES['photoimg']['size']; // размер файла
    if(strlen($name))
    {
        list($txt, $ext) = explode(".", $name); // разбиваем на имя и формат
        if(in_array($ext,$valid_formats))    // смотрим формат такой как мы разрешили?!
        {
            if($size<(1024*1024)) // Ограничиваем размер файла в 1 мб
             {
             $actual_image_name = time().$session_id.".".$ext; // задаем уникальное имя файлику
             $tmp = $_FILES['photoimg']['tmp_name'];
            if(move_uploaded_file($tmp, $path.$actual_image_name)) // переносим файл с tmp в наш каталог
             {
                echo "<img src='uploads/".$actual_image_name."' class='preview'>"; // показываем привьюшку
             }
            else echo "облом";
             }
            else echo "Размер файла больше одного мб";
        }
        else echo "Формат не подходит.";
    }
    else echo "Пожалуйста выбирите изображение!";
    exit;
}

А что бы это все было аяксовым подключаем jquery и jquery.form (http://jquery.malsup.com/form/)

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="jquery.form.js"></script>

И последний штрих:

<script>
$(document).ready(function() //готов
{
$('#photoimg').live('change', function() //photoimg изменился?!
{
$("#preview").html(''); // чистим preview
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>'); //показываем картинку загрузки
$("#imageform").ajaxForm( //отправляем аякс запрос (тут уже действует jquery.fomr
{
target: '#preview'
}).submit();
});
});
</script>
0 comments
  1. Rusya
    Rusya
    16.06.2012 at 21:23

    Каптча жестокая, чуть незабыл что хотел сказать), как на счет множественной загрузки?

    Reply
  2. utz0r2
    utz0r2
    17.06.2012 at 11:36

    здесь не реализовано

    Reply
  3. Alex
    Alex
    24.07.2012 at 17:59

    Я не получаю temp_name
    пишу на обработчике var_dump($_FILES) и получаю
    array(1) { ["photo"]=> array(5) { ["name"]=> string(12) "IMG_2598.jpg" ["type"]=> string(0) "" ["tmp_name"]=> string(0) "" ["error"]=> int(1) ["size"]=> int(0) } }
    т.е. получаю только имя файла. Скажите как получить temp_name?

    Reply
  4. Серега
    Серега
    14.12.2013 at 23:33

    list($txt, $ext) = explode(".", $name); // разбиваем на имя и формат

    Хорошо, а если файл имеет такой вид filename.png.js ? он спокойно пройдет.

    Reply
  5. алекс
    алекс
    30.04.2015 at 09:45

    last(explode(".", $name)); получим формат

    Reply
  6. Аноним
    Аноним
    30.04.2015 at 14:08

    может все таки array_pop(explode(".", $name));

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

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