Aug 14
Upload e Remoção de arquivo via AJAX
CSS, HTML, Javascript, PHP, Sites Comentar >> Marcelo KorjenioskiNão é possível fazer upload de arquivo via Ajax porem alguém encontrou a solução usando iframe. Vamos chamar de fake upload via Ajax. No AJAX F1 tem um tutorial de como fazer este sistema de AJAX file upload.
Um leitor do solicitou uma ajuda com a listagem do itens após o upload do arquivo e também para remover ele. Resolvi criar um sistema baseado no AJAX F1 e disponibilizar.
O sistema esta bem crú então conforme for passando o tempo vou melhorar o código.
Aqui esta o link para o dowload do exemplo com css e imagens.
No exemplo aqui postado esta sem o css para o código fica menor.
Vamos criar um arquivo index.php e colocar 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á solicitar 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á remover 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 comentário que terei prazer em ajudar.
Comentários são bem vindos assim posso melhorar a qualidade dos tutoriais aqui apresentados.
ola amigo, neste codigo teria como modificar pra poder baixar o arquivo tbm??????
precisava desta ajuda
Show de bola mano;
esse script vai me ajudar bastante, valeu!!