VPF::Юзабильная форма добавления новости

KonstRuctor

Дата 23.7.2012, 17:02 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 245
Регистрация: 31.3.2006
Где: Россия, Санкт-Пет ербург

Репутация: нет
Всего: нет

Всем привет!
Продолжаю построение юзабильных форм.
Сегодня я создаю форму добавления новости для админки сайта. Задача предельно простая: новость состоит из заголовка, короткого текста и основного текста, а также имеет картинку. Можно сделать html-форму и отправить ее на сервер, в случае ошибки перегрузить страницу, выдать все ошибки... Но хочется сделать интерфейс удобным, работать без перезагрузок.
За основу взят загрузчик ajaxupload.3.5.js.
Я в начале опишу что я делаю и как, после чего задам вопрос, что же мне не понятно. Буду исренне рад получить ответы.
Моя html-форма состоит из двух ячеек таблицы: левая отвечает за картинку, правая -- сама форма добавления новости. При успешном добавлении картинки в основную форму копируется имя загруженного файла для вставки этого имени в базу. Нажате кнопки ОК -- валидация (ajax.php) и в случае успеха -- редирект к перечню новостей.
Сперва приведу html-код основной страницы:

Код


<!DOCTYPE html>
<html lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>AJAX File Upload</title>
<script type="text/javascript" src="js/jquery-1.3.2.js" ></script>
<script type="text/javascript" src="js/ajaxupload.3.5.js" ></script>
<link rel="stylesheet" type="text/css" href="./styles.css" />
<script type="text/javascript" >
    // аплоад файла
    $(function(){
        var btnUpload=$('#upload');
        var status=$('#status');
        new AjaxUpload(btnUpload, {
            action: 'upload-file.php',
            name: 'uploadfile',
            onSubmit: function(file, ext){
                 if (! (ext && /^(jpg|jpeg)$/.test(ext))){
                    // extension is not allowed 
                    status.text('Only JPG files are allowed');
                    return false;
                }
                status.text('Uploading...');
            },
            onComplete: function(file, response){
                //On completion clear the status
                status.text('');
                //Add uploaded file to list
                if(response==="success")
                {
                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                    $('#my_file').attr('value',file);
                    $('#my_file').attr('style','border:3px solid red');
                    $('#upload').html('Загружена');
                }
                else
                {
                    $('<li></li>').appendTo('#files').text(file).addClass('error');
                }
            }
        });
        
    });

    // работа с основной формой и ее валидация
    $(function(){
        $('#my_form').submit(function(e){
            e.preventDefault();
            var str = $(this).serialize();
            var my_superknopka = $('#my_superknopka');
            my_superknopka.attr('disabled','disabled');
            $.ajax({
                type: "POST",
                url: "ajax.php",
                data: str,
                success: function(msg) {
                    $("#my_errors_div").ajaxComplete(function(event, request, settings) {
                        if ( msg == 'OK' ) {
                            msg = '';
                            top.location.href="news.php"; // перенаправление к перечню новостей
                        }
                        else {
                            $(this).html(msg);
                            my_superknopka.removeAttr('disabled');
                            my_superknopka.attr('value','Еще разок!')
                        }
                    });
                }
            });
            return false;
        });
    });
</script>
</head>
<body>
<h3>Загрузка файлов по технологии AJAX и jQuery</h3>
<table>
<tr>
    <td style="width:30%;">

        <div id="upload">Картинка</div>
        <span id="status"></span>
        
        <ul id="files" ></ul>
    </td>
    <td style="width:70%;">
        <div id="my_errors_div"></div>
        <form id="my_form">
            <fieldset>
                <legend>Заполните ваши данные</legend>
                <label for="title">Заголовок</label> <input type="text" name="title" id="title">
                <label for="inbref">Короткий текст</label> <textarea name="inbref" id="inbref" rows="2" cols="3"></textarea>
                <label for="text">Текст</label> <textarea name="text" id="text" rows="2" cols="3"></textarea>
                <input type="submit" value="OK" id="my_superknopka">
                <input type="text" name="my_file" id="my_file">
                <input type="hidden" name="action" value="sendform">
            </fieldset>
        </form>
    </td>
</tr>
</table>
</body>
</html>

Необходимо также привести файл стилей, чтобы было понятно что здесь и как оформляется:

Код


#upload{
    padding:15px;
    font-weight:bold; font-size:1.3em;
    font-family:Arial, Helvetica, sans-serif;
    text-align:center;
    background-color:#f2f2f2;
    color:#3366cc;
    border:1px solid #ccc;
    width:150px;
    cursor:pointer;
}
.darkbg{ background:#ddd !important; }
#status{ font-family:Arial,sans-serif; padding:5px; }
ul#files{ list-style:none; padding:0; margin:0; }
ul#files li{ padding:10px; margin-bottom:2px; width:200px; float:left; margin-right:10px;}
ul#files li img{ max-width:180px; max-height:150px; }
.success{ background:#99f099; border:1px solid #339933; }
.error{ background:#f0c6c3; border:1px solid #cc6622; }
table { border: 3px solid #808080; border-collapse: collapse; }
table td { padding: 5px; border: 1px solid #808080; }
label { display: block; }
textarea { width: 100%; }
legend { font-weight: bold; }
fieldset { padding: 5px; }

За серверную часть отвечают два файла. Первый (upload-file.php) -- это аплоад картинки, пока без ресайза и проверок.

Код


<?php
$uploaddir = './uploads/'; 
$file = $uploaddir . basename($_FILES['uploadfile']['name']); 
if (move_uploaded_file($_FILES['uploadfile']['tmp_name'], $file)) { echo "success"; } else { echo "error"; }
?>

Второй файл (ajax.php) -- валидация основной формы добавления новости:

Код


<?php
if ( $_POST['action'] && $_POST['action'] == 'sendform' ) {
$error = '';
// очистку переменных от мусора опустим для простоты изложения
if ( !$_POST['title'] )  $error .= "<li>Не заполнен заголовок</li>";
if ( !$_POST['inbref'] )  $error .= "<li>Не заполнен короткий текст</li>";
if ( !$_POST['text'] )  $error .= "<li>Не заполнен текст</li>";
if ( !$_POST['my_file'] )  $error .= "<li>Не загружена картинка</li>";
if ( !$error )
{
// для простоты мы пока не работаем с базой    
// $q = mysql_query("INSERT INTO news (title,inbref,text,foto,postdate) ........
echo "OK";
}
else echo "<div class=\"err\">Ошибка! ".$error."</div>";
}

Все это вместе сейчас работает, но все совершенно сырое. Что у меня не получается?
1) Мне нужно переименовать файл. Нужно следовать шаблону
$filename = "news".date(YmdHis); или $filename = "news".time();
Я не понимаю, как переименовать загруженный файл, на каком этапе это можно сделать.
2) Хотелось бы рядом с картинкой сделать кнопку ее удаления, если вдруг загрежено не то, что хотелось бы. В каком месте скрипта ее создать? Как сделать серверную часть?
3) Хотелось бы загружать картинку не автоматом, а иметь некую кнопку Send. На форуме автора это вяло обсужданиеся, но решения я не нашел или не понял.
Спасибо!

KonstRuctor

Дата 23.7.2012, 23:42 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Пункт (2) сделал таким образом:
1) Переписал javascript-функцию аплоада файла:

Код


onComplete: function(file, response){
                //On completion clear the status
                status.text('');
                //Add uploaded file to list
                if(response==="success")
                {
                    $('<li></li>').appendTo('#files').html('<img src="./uploads/'+file+'" alt="" /><br />'+file).addClass('success');
                    $('#my_file').attr('value',file);
                    $('#my_file').attr('style','border:3px solid red');
                    $('#upload').html('Загружена');
                    // создаем кнопку удаления
                    $('<span></span>').appendTo('#remove_div').attr({id:'my_delete_filename',rel:file,style:'cursor:pointer'}).html('del');
                    // удаляем картинку
                    $('#my_delete_filename').click(function(){
                        var my_filename = $(this).attr('rel');
                        // даем юзеру последний шанс передумать
                        if ( confirm('Вы уверены, что хотите удалить эту картинку?') )
                        {
                            $.ajax({
                                type: "POST",
                                url: "ajax.php",
                                data: {action:'file_delete',filename:my_filename},
                                success: function(msg) {
                                    $('#status').ajaxComplete(function(event, request, settings) {
                                        if ( msg == 'OK' ) {
                                            msg = '';
                                            $('#remove_div').empty();
                                            $('#files').empty();
                                            $('#upload').html('Картинка');
                                            $('#status').html('Файл успешно удален');
                                        }
                                        else {
                                            $(this).html(msg);
                                        }
                                    });
                                }
                            }); // удалили
                        }
                    });
                }
                else
                {
                    $('<li></li>').appendTo('#files').text(file).addClass('error');
                }
            }

И серверная часть удаления – файл ajax.php

Код


if ( $_POST['action'] && $_POST['action'] == 'file_delete' ) {
    $error = '';
// очистку переменных от мусора опустим для простоты изложения
    if ( !$_POST['filename'] )  $error .= "<li>Не указано имя файла</li>";
    if ( !$error )
    {
        $filename = $_POST['filename'];
        if ( file_exists("./uploads/".$filename) )
        {
            unlink("./uploads/".$filename);
            echo "OK";
        }
        else echo "<div class=\"err\">Ошибка! Файл не найден на сервере</div>";

    }
    else echo "<div class=\"err\">Ошибка! ".$error."</div>";
}

Остается только вопрос: как все-таки переименовать файл загруженной фотографии?
Прикрепляю весь архив для экспериментов коллег.

Присоединённый файл ( Кол-во скачиваний: 2 )

ajax_upload.zip 27,66 Kb

KonstRuctor

Дата 25.7.2012, 11:41 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Коллеги, я разобрался с переименованием загружаемого файла.
Разобрался криво, что в народе называется "костыли". Мог бы кто-нибудь предложить более изящное решение?
Вот мой метод:
1) В серверном php-файле, который отвечает за аплоад картинки:

Код


$file_new_name_body = time();
echo 'success_'.$file_new_name_body;

2) На клиенте принимаем данные, редактируем функцию onComplete:

Код


var my_response = response.split('_');
if(my_response[0] === "success")
{
$('<li></li>').appendTo('#files').html('<img src="./uploads/'+my_response[1]+'.jpg" alt="" /><br />'+my_response[1]).addClass('success');

Таким образом можно рулить именем файла картинки.
Недостаток этого метода в том, что я жестко ограничил – JPG и все. Скрипт получается не гибкий.
Для моих нужд этого вполне достаточно, но есть ли более изящное решение?
Прискладываю новую версию всего скрипта, может быть кому-нибудь он принесет пользу.

Присоединённый файл ( Кол-во скачиваний: 11 )

ajax_upload_ver2.zip 86,02 Kb

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »