PHP5

Загрузка файлов на сервер

ExtJS 4 обладает достаточным функционалом для загрузки файлов на сервер. Для этого нам, во-первых, потребуется форма для выбора файла на стороне клиента, и, во-вторых, некоторый код на стороне сервера, который бы принимал файл.

На стороне клиента для выбора файла мы можем воспользоваться компонентом Ext.form.field.File, который имеет xtype:'filefield'.

var formPanel=Ext.create('Ext.form.Panel',{ 
		title: 'Форма Запроса',
		bodyStyle:'padding:5px 5px 0',
		width: 400,
		height:150,
		renderTo: Ext.getBody(),
		items: [{
			xtype: 'filefield',
			name: 'document',
			fieldLabel: 'Выберите файл: ',
			msgTarget: 'side',
			allowBlank: false
		}],
		buttons: [{
			text: 'Загрузить файл',
			handler: function(){
				var form = this.up('form').getForm();
				if (form.isValid()) {
						form.submit({
						url: 'upload.php',
						waitMsg: 'Загрузка...',
						success: function(fp, o){
                            Ext.Msg.alert('Загрузка прошла успешно', 'Файл ' +o.result.file +" загружен");
                        }
					});
				}
			}
		}]
	});

При отправке сначала мы проверяем форму на валидность (form.isValid()), и потом только отправляем файл.

Параметр waitMsg хранит текст, который будет отображаться при в индикаторе при загрузке файла на сервер.

Файл upload.php обрабатывает загруженный файл и сохраняет его по определенному пути:

<?php
$uploaddir = 'C:/Windows/TEMP/';
$uploadfile = $uploaddir . basename($_FILES['document']['name']);

if (move_uploaded_file($_FILES['document']['tmp_name'], $uploadfile)) {
	echo '{"success": true, "file": "'. $uploadfile .'" }';
} else {
	echo '{"success": false}';
}
?>

При загрузке файла ExtJS создает скрытый элемент <form>, который помещается во временный элемент <frame>. При этом заголовок Content-Type у формы устанавливается в multipart/form. После окончания загрузки и получения ответа с сервера временный фрейм удаляется.