Я собираюсь опубликовать полный пример, используя swfupload и PHP. Я считаю, что документы swfupload не очень полезны для начинающих, и этот пример поможет многим людям. то, что вам нужно скачать, следует
Сначала скопируйте / создайте все необходимые файлы
- Скачать ядро v2.2.x.y и образцы
- Затем создайте следующую структуру папок
создайте папку с именем swfupload и скопируйте в нее следующие файлы из ядра 2.2.x.y
- swfupload.js (из корневой корневой папки)
- swfupload swf-файл (из папки core / Flash)
скопируйте следующие файлы из демоверсии 2.2.x в нашу папку swfupload
- default.css (из 2.2.x.y samples / demos / css)
- скопируйте сюда папку 2.2.x.y samples / demos / simpledemo / js (как она есть)
- скопируйте сюда папку 2.2 / x.y samples / demos / images (как она есть)
Теперь создайте PHP-скрипт для получения файла (назовите его receiver.php) в папке swfupload. Теперь у вас есть папка с именем swfupload в корне документа, которая содержит все необходимые файлы.
Создание тестовой html-страницы с контролем загрузки swfupload
<!-- file upload component -->
<div class="fieldset flash" id="fsUploadProgress">
<span class="legend">Upload Queue</span>
</div>
<div id="divStatus">No Files Uploaded</div>
<div>
<span id="spanButtonPlaceHolder"></span>
<input id="btnCancel" type="button" value="Cancel All Uploads" onclick="swfu.cancelQueue();" disabled="disabled" style="margin-left: 2px; font-size: 8pt; height: 29px;" />
</div>
включает JavaScript для взаимодействия с управлением swfupload
теперь вы должны включить файл swfupload css и необходимые файлы javascript в наш тестовый html. нам также нужно инициализировать и настроить js, необходимые для взаимодействия с управлением swfupload.
<link href="/swfupload/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/swfupload/swfupload.js"></script>
<script type="text/javascript" src="/swfupload/js/swfupload.queue.js"></script>
<script type="text/javascript" src="/swfupload/js/fileprogress.js"></script>
<script type="text/javascript" src="/swfupload/js/handlers.js"></script>
<script type="text/javascript">
//attach events
$(document).ready(function(){
$("a.removeMedia").live("click", function(event){
event.preventDefault();
var docId = $(this).attr("id");
//remove flexi data
webgloo.gMedia.table.removeRow(docId);
}) ;
//initialize gMedia table with documentId coming from server
webgloo.gMedia.debug = false ;
webgloo.gMedia.table.load();
});
//swffileupload related javascript
var swfu;
window.onload = function() {
var settings = {
flash_url : "/swfupload/swfupload.swf",
upload_url: "/swfupload/receiver.php",
post_params: {"PHPSESSID" : "<?php echo session_id(); ?>"},
file_size_limit : "10 MB",
file_types : "*.*",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 0,
custom_settings : {
progressTarget : "fsUploadProgress",
cancelButtonId : "btnCancel"
},
debug: false,
// Button settings
button_image_url: "/swfupload/images/TestImageNoText_65x29.png",
button_width: "65",
button_height: "29",
button_placeholder_id: "spanButtonPlaceHolder",
button_text: '<span class="theFont">Upload</span>',
button_text_style: ".theFont { font-size: 16; }",
button_text_left_padding: 12,
button_text_top_padding: 3,
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler : fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};
swfu = new SWFUpload(settings);
};
</script>
Пожалуйста, смотрите изменения, которые вам нужно сделать в настройках. Теперь мы настроены использовать скрипт PHP. мы нажмем на PHP-скрипт, и PHP-скрипт вернет некоторый ответ, который может использовать наш тестовый html (такие как расположение документа или doc_id, если вы храните в БД, имя, размер, mime) и т. д.
PHP-скрипт для обработки на стороне сервера
если вы знаете, как обрабатывать файлы в PHP, то единственное, что вам нужно знать, это то, что имя элемента файла, отправляемое swfupload, это Filedata. остальное все это детали. После обработки загрузки вашего файла через $ _FILES ваш скрипт-получатель может вернуть некоторые данные, которые могут быть использованы для обновления вашего html-документа с подробной информацией о документе. Пример загрузки PHP, включенный в форум swfupload, - это спагетти. если вы хотите посмотреть @ объектно-ориентированную модель, посмотрите @ следующие файлы
http://code.google.com/p/localo/source/browse/job/web/swfupload/receiver.php
http://code.google.com/p/localo/source/browse/lib/webgloo/common/Upload.php
http://code.google.com/p/localo/source/browse/lib/webgloo/job/FileUpload.php
Это только для иллюстрации. Код не будет работать как есть, поскольку он зависит от моей библиотеки.
проводной PHP-скрипт возвращает данные обратно в html, содержащий элемент управления swfupload
Это последний шаг. то, что серверный скрипт возвращает при успешной загрузке, должно быть обработано одним из обработчиков swfupload javascript для обновления html (скажем, сохранение возвращенного URI загрузки файла в документе для дальнейшей отправки его в какой-то другой сценарий и т. д.) Способ открытия проводки открыт Запустите /swfupload/js/handlers.js и внесите в него изменения.
function uploadSuccess(file, serverData) {
// The php script may return an error message etc. but the handler event for swfupload
// client is still uploadSuccess. we have to parse data returned from server to find known/script
// error case.
try {
var progress = new FileProgress(file, this.customSettings.progressTarget);
//try parsing server data now
var dataObj ;
try{
if(webgloo.gMedia.debug) {
alert("server returned => " + serverData);
}
dataObj = JSON.parse(serverData);
//process server data
if(dataObj.error === undefined || dataObj.error != 'yes'){
//no error object or error is not yes!
//process document object received from server
webgloo.gMedia.table.addRow(dataObj.document.uuid, dataObj.document.originalName);
progress.setComplete();
progress.setStatus(dataObj.message);
progress.toggleCancel(false);
}else {
//known error
progress.setStatus("Error: " + dataObj.message);
}
} catch(ex) {
//we need to gaurd against JSON parsing errors as well
progress.setStatus("Error: " + ex.toString());
}
} catch (ex) {
this.debug(ex);
}
}
Здесь вы можете установить свой собственный javascript. Пример (я обновляю таблицу документов и сохраняю метаданные возвращенных документов в виде строки json в документе формы), см. Здесь:
http://code.google.com/p/localo/source/browse/job/web/js/main.js
Надеюсь, этого достаточно, чтобы вы начали работать с swfupload. Удачного кодирования:)