Загрузка файлов с помощью FileReference

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

Для начала создадим файл upload.php:

code: #php
<?php
if ($_FILES['Filedata']['name']) {
  $uploadDir = "images/";
  $uploadFile = $uploadDir . basename($_FILES['Filedata']['name']);
  move_uploaded_file($_FILES['Filedata']['tmp_name'], $uploadFile);
}
?>

Серверная часть готова – я думаю комментировать код нет смысла. Для тех, кто знает PHP, разобраться с этим скриптом будет несложно, а для кто не знает, просто совет – изучайте PHP :)

Теперь поработаем над интерфейсом.

  1. Создаем новый документ во Flash и сохраняем как “fileUpload.fla”.
  2. Создаем два слоя action и content
  3. В слое content рисуем прямоугольник (который в будущем будет отображать статус загрузки), превращаем в мувиклип и называем rect_mc (имеется в иду Instace Name). Теперь нам нужны две кнопки, одна для выбора файла, другая для загрузки. Не будем долго мучится с с рисованием этих кнопок – возьмем стандартные из набора компонентов. И текстовое поле, которое будет отображать статус файла и сообщении об ошибках.

Дайте всем этим объектам следующие имена:

  • Для текстового поля: Instance name - name_txt
  • Для первой кнопки: Instance name - browse_btn, Label – Browse
  • Для второй кнопки: Instance name - upload_btn, Label - Upload

Ну а теперь самое главное. В слое Action:

// импортируем класс
import flash.net.FileReference;
// инициализируем настройки, кнопку upload_btn, мы отключаем, пока не будет известно имя файла
upload_btn.enabled = false;
// создаем экземпляр класса FileReference
var file_fr:FileReference = new FileReference();
// создаем объект для листнера событий FileReference
var list_obj:Object = new Object();
list_obj.onSelect = function() {
upload_btn.enabled = true;
name_txt.text = file_fr.name;
};
list_obj.onComplete = function() {
name_txt.text = "All Done";
rec_mc.clear();
upload_btn.enabled = false;
};
list_obj.onProgress = function(bytesTotal, bytesLoaded) {
var percent = bytesLoaded/file_fr.size;
drawRec(percent);
};
// если пользователь отменяет загрузку
list_obj.onCancel = function() {
name_txt.text = "Cancel was selected";
};
// если произошла ошибка
list_obj.onIOError = function(fileRef) {
name_txt.text = "IO error with "+fileRef.name;
};
// если произошла ошибка, связанная с безопасностью
list_obj.onSecurityError = function(fileRef, error) {
name_txt.text = "Security error with "+fileRef.name+":"+error;
};
// ошибки протокола
list_obj.onHTTPError = function(fileRef:FileReference, error:Number) {
name_txt.text += "HTTP error: with "+fileRef.name+":error #"+error;
};
// аттачим листнер
file_fr.addListener(list_obj);
//the event for the browse button
browse_btn.clickHandler = function() {
file_fr.browse([{description:"JPEGs", extension:"*.JPG;*.jpg"}]);
};
// событие для кнопки upload
upload_btn.clickHandler = function() {
file_fr.upload("http://localhost/upload.php");
rec_mc.fillColor = Math.random()*0x1000000;
};
// рисуем прямоугольник, отображающий процесс загрузки
function drawRec(per) {
rec_mc.clear();
rec_mc.lineStyle(0);
rec_mc.beginFill(rec_mc.fillColor, 70);
rec_mc.lineTo(per*rec_mc._width, 0);
rec_mc.lineTo(per*rec_mc._width, rec_mc._height);
rec_mc.lineTo(0, 30);
rec_mc.lineTo(0, 0);
rec_mc.endFill();
}

Вот в принципе и все. Данный пример наглядно иллюстрирует как можно файлы, в нашем случае изображения, заливать на сервер… Если Вы хотите использовать этот пример в Сети, не забудьте написать вначале System.security.allowDomain("http://адрес_сайта/");

Подробности о событиях, методах и свойствах FileReference читайте, напоминаю, в Help-е. Именно там, как нигде, вы получите ответы на все интересующие Вас вопросы.

автор: SINtez_v

Поделиться:

Похожие статьи: