Hoje criaremos, utilizando ExtJs 4 e PHP, um sistema de upload de imagens.
Primeiro faça o download da biblioteca no site do ExtJs: http://www.sencha.com/products/extjs/download/
Faremos três arquivos nesse post: fileUpload.html, fileUpload.js e fileUpload.php.
Vamos criar o fileUpload.html.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
< !DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>File Upload com ExtJs 4 e PHP</title>
<!-- Carregando biblioteca ExtJs -->
<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="/extjs/bootstrap.js"></script>
<!-- -->
</head>
<body>
<div id="fu-form" style="padding:25px;"></div>
</body>
</html> |
Agora vamos criar o fileUpload.js que é onde toda a ação do ExtJs 4 acontece.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
Ext.onReady(function(){
Ext.create('Ext.form.Panel', {
width: 450,
bodyPadding: 10,
frame: true,
renderTo: "fu-form",
items:[{
xtype: 'filefield',
name: 'file',
fieldLabel: 'Arquivo',
labelWidth: 50,
msgTarget: 'side',
allowBlank: false,
anchor: '100%',
buttonText: 'Selecione um arquivo...'
}],
buttons: [{
text: 'Upload',
handler: function(){
var form = this.up('form').getForm();
if(form.isValid()){
form.submit({
url: 'fileUpload-action.php',
waitMsg: 'Carregando o seu arquivo...',
failure: function(frm, act){
Ext.Msg.alert('Erro', act.result.description);
},
success: function(frm, act){
Ext.create('Ext.window.Window', {
title: 'Detalhes do Upload',
width: 440,
height: 400,
bodyPadding: 10,
layout: 'fit',
html: '<img src="'+act.result.image.stored+'" width="400" height="300" /><p>Nome: '+act.result.image.name+'</p><p>Tamanho: '+parseInt(act.result.image.size)+' Kb</p><p>Tipo: '+act.result.image.type+'</p>'
}).show();
}
});
}
}
}]
});
}); |
E referenciá-lo no arquivo html.
|
1 |
<script type="text/javascript" src="/fileUpload.js"></script> |
Agora o vamos configurar o arquivo php para validar o tipo de arquivo e realizar a ação do upload.
Iremos permitir somente o upload de aquivos .gif, .jpeg e .png para evitar que arquivos maliciosos entrem no servidor.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
< ?php
if(in_array($_FILES["file"]["type"], array("image/gif", "image/jpeg", "image/png"))){
if(move_uploaded_file($_FILES["file"]["tmp_name"], "uploads/".$_FILES["file"]["name"])){
echo '{
success: true,
image: {
name: "'.$_FILES["file"]["name"].'",
type: "'.$_FILES["file"]["type"].'",
size: "'.($_FILES["file"]["size"] / 1024).'",
tmp_stored: "'.$_FILES["file"]["tmp_name"].'",
stored: "uploads/'.$_FILES["file"]["name"].'"
}
}';
}else{
echo '{
success: false,
description: "Upload não concluído, verifique as permissões na pasta."
}';
}
}else{
echo '{
success: false,
description: "Tipo de arquivo inválido."
}';
}
?> |
Utilizamos alguns recursos diferentes, se ficou com alguma dúvida vai aí os links com explicações mais detalhadas:
http://www.w3schools.com/php/func_array_in_array.asp
http://www.w3schools.com/php/php_file_upload.asp
http://www.w3schools.com/jsref/jsref_parseInt.asp
http://docs.sencha.com/ext-js/4-0