Всем привет!
Продолжаю построение юзабильных форм.
Сегодня я создаю форму добавления новости для админки сайта. Задача предельно простая: новость состоит из заголовка, короткого текста и основного текста, а также имеет картинку. Можно сделать html-форму и отправить ее на сервер, в случае ошибки перегрузить страницу, выдать все ошибки... Но хочется сделать интерфейс удобным, работать без перезагрузок.
За основу взят загрузчик http://valums.com/ajax-upload/.
Я в начале опишу что я делаю и как, после чего задам вопрос, что же мне не понятно. Буду исренне рад получить ответы.
Моя 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. На форуме автора это вяло обсужданиеся, но решения я не нашел или не понял.
Спасибо! |