Aug 14
Upload e Remoção de arquivo via AJAX
CSS, HTML, Javascript, PHP, Sites Comentar >> Marcelo KorjenioskiNão é posÂsÃÂvel fazer upload de arquivo via Ajax porem alguém enconÂtrou a soluÂção usando iframe. Vamos chaÂmar de fake upload via Ajax. No AJAX F1 tem um tutoÂrial de como fazer este sisÂtema de AJAX file upload.
Um leiÂtor do soliÂciÂtou uma ajuda com a lisÂtaÂgem do itens após o upload do arquivo e tamÂbém para remoÂver ele. Resolvi criar um sisÂtema baseÂado no AJAX F1 e disponibilizar.
O sisÂtema esta bem crú então conÂforme for pasÂsando o tempo vou melhoÂrar o código.
Aqui esta o link para o dowload do exemÂplo com css e imagens.
No exemÂplo aqui posÂtado esta sem o css para o código fica menor.
Vamos criar um arquivo index.php e coloÂcar o código abaixo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Enviar e Remover Arquivos</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function startUpload(){
// Quando inicia o Upload o elemento a mensagem de progreso fica visÃvel e o formulário é ocultado.
document.getElementById('f1_upload_process').style.visibility = 'visible';
document.getElementById('f1_upload_form').style.visibility = 'hidden';
return true;
}
function stopUpload(success,file){
var result = '';
if (success == 1){
// Caso o retorno do envio do arquivo vindo do iframe seja 1 ele adiciona o arquivo na lista.
result = '<span>O arquivo foi enviado com sucesso!<\/span><br/><br/>';
adicionar(file);
}
else {
// Se ocorrer erro mostra a mensagem.
result = '<span>Ocorreu um erro na hora de enviar o arquivo!<\/span><br/><br/>';
}
document.getElementById('f1_upload_process').style.visibility = 'hidden';
document.getElementById('f1_upload_form').innerHTML = result + '<label>File: <input name="myfile" type="file" size="30" /><\/label><label><input type="submit" name="submitBtn" value="Upload" /><\/label>';
document.getElementById('f1_upload_form').style.visibility = 'visible';
return true;
}
// Remove elementos
function removeElement(id) {
// Declara variável lista que indica onde o elemento será removido.
var lista   = document.getElementById('lista');
// Declara variavel elemento que indica qual elemento será removido.
var elemento = document.getElementById(id);
// Função removeChild irá procurar elementos que estão dentro da variável lista com o valor
// da variavel elemento para remover.
lista.removeChild(elemento);
}
// Adiciona elementos basedo no valor do file input
function adicionar(id) {
// Pega a id do item da lista criado baseado no nome do arquivo
var valor  = id;
// Cria uma variavel com referencia ao Id do Elemento
var lista   = document.getElementById('lista');
// É criado uma tag <li> que contem informação do elemento adicionado.
// Também é adicionado um <input> do tipo hidden com o nome do arquivo.
// Estou usando o nome do arquivo como ID na lista criada.
var dado = '<li id="element_' + valor + '">'
+ '<form action="delete.php" method="post" target="delete_target">'
+ '<label for="file">' + valor + '</label>'
+ '<input name="file" value="' + valor +'" type="hidden"/>'
+ '<input id="item_' + valor + '" type="submit" value="Remover" name="Remover"/></form></li>';
// Pega o código HTML dentro da lista e adiciona novos registros.
lista.innerHTML = lista.innerHTML + dado;
return true;
}
//-->
</script>
</head>
<body>
<div id="container">
<div id="header"><div id="header_left"></div>
<div id="header_main">Enviar e Remover Arquivos</div><div id="header_right"></div></div>
<div id="content">
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
<!-- Mensagem de progresso de envio do arquivo -->
<p id="f1_upload_process">Carregando...<br/><img src="loader.gif" /><br/></p>
<p id="f1_upload_form" align="center"><br/>
<label>Arquivo:
<input name="myfile" id="myfile" type="file" size="30" />
</label>
<label>
<input type="submit" name="submitBtn" value="Enviar" />
</label>
</p>
<iframe id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</form>
</div>
<div id="arquivos">
<fieldset>
<legend>Arquivos</legend>
<div>
<!-- Lista onde será adicionado a relação dos arquivos enviados -->
<ul id="lista"></ul>
</div>
<iframe id="delete_target" name="delete_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
</fieldset>
</div>
<div id="footer">
<a href="http://www.ajaxf1.com" target="_blank">Powered by AJAX F1</a> /
<a href="http://www.phaneronsof.com" target="_blank">Powered by Phaneronsoft</a>
</div>
</div>
</body>
Agora vamos criar um arquivo php que o iframe irá soliÂciÂtar para enviar o arquivo. Vamos nomear de upload.php
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
$result = 0;
$target_path = $destination_path . basename( $_FILES['myfile']['name']);
// Pega o nome do arquivo para devolver para a lista HTML via Javascript.
$file_name = $_FILES['myfile']['name'];
if(@move_uploaded_file($_FILES['myfile']['tmp_name'], $target_path)) {
//Caso o arquivo seja enviado com sucesso retorna 1.
$result = 1;
}
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.stopUpload(<?php echo $result; ?>,'<?php echo $file_name; ?>');</script>
E por ultimo criar um arquivo com o nome delete.php que irá remoÂver o arquivo que foi enviado.
<?php
// Modifique o endereço do upload aqui
$destination_path = getcwd().DIRECTORY_SEPARATOR;
// Pega o nome do arquivo para devolver para a lista HTML via Javascript ara ser removido da lista.
// Estou usando o nome do arquivo como ID na lista.
$file = $_POST['file'];
$target_path = $destination_path. $_POST['file'];
@unlink($target_path);
sleep(1);
?>
<!-- Quando este arquivo é solicitado no Iframe ele irá enviar para a função da pagina index.php o resultado php passando para a função em JS -->
<script language="javascript" type="text/javascript">window.top.window.removeElement('element_<?php echo $file; ?>');</script>
Caso tenha alguma duvida deixe um comenÂtário que terei praÂzer em ajuÂdar.
ComenÂtários são bem vinÂdos assim posso melÂhoÂrar a qualÂiÂdade dos tutoÂriÂais aqui apresentados.
http://www.cgvsolucoes.com.br Celso Gomes Vieira
saulo
