[Resolvido] upload assincrono

diasgabrie · Novembro 30, 2009

amigos, estou fazendo um esquema de upload assincrono para postar imagens em meu site.

O problema é que no google chrome não é exibido o resultado na div recebe. Como poderia fazer ele receber?

Outro problema, uso esse sistema em uma página de comentários, quando o usuário envia um comentário ele é mostrado na div recebe. Porém, se o usuário enviar um segundo comentário o primeiro desaparece. Como poderia mante-lo?

obrigada.

js

/* funçõezinhas padrão pra facilitar */
function $m(quem){
 //apelido só pra não ficar repetindo o document.getElementById
 return document.getElementById(quem)
}
function remove(quem){
 quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
 //o velho do elcio.com.br/crossbrowser
    if (obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if (obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, fn );
  } else {
    obj.removeEventListener( type, fn, false ); }
} 
/* a que faz o serviço pesado */
function micoxUpload(form,url_action,id_elemento_retorno,html_exibe_carregando,html_erro_http){
/******
* micoxUpload - Submete um form para um iframe oculto e pega o resultado. Consequentemente pode
*               ser usado pra fazer upload de arquivos de forma assíncrona.
* Use a vontade mas coloque meu nome nos créditos. Licença Creative Commons.
* Versão: 1.0 - 03/03/2007 - Testado no FF2.0 IE6.0 e OP9.1
* Autor: Micox - Náiron JCG - elmicox.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - o form a ser submetido ou seu ID
* url_action - url pra onde deve ser submetido o form
* id_elemento_retorno - id do elemento que irá receber a informação de retorno
* html_exibe_carregando - Texto (ou imagem) que será exibido enquanto se carrega o upload
* html_erro_http - texto (ou imagem) que será exibido se der erro HTTP.
*******/

 //testando se passou o ID ou o objeto mesmo
 form = typeof(form)=="string"?$m(form):form;
 
 var erro="";
 if(form==null || typeof(form)=="undefined"){ erro += "O form passado no 1o parâmetro não existe na página.\n";}
 else if(form.nodeName!="FORM"){ erro += "O form passado no 1o parâmetro da função não é um form.\n";}
 if($m(id_elemento_retorno)==null){ erro += "O elemento passado no 3o parâmetro não existe na página.\n";}
 if(erro.length>0) {
  alert("Erro ao chamar a função micoxUpload:\n" + erro);
  return;
 }

 //criando o iframe
 var iframe = document.createElement("iframe");
 iframe.setAttribute("id","micox-temp");
 iframe.setAttribute("name","micox-temp");
 iframe.setAttribute("width","0");
 iframe.setAttribute("height","0");
 iframe.setAttribute("border","0");
 iframe.setAttribute("style","width: 0; height: 0; border: none;");
 /* Não usei display:none pra esconder o iframe
    pois tem uma lenda que diz que o NS6 ignora
    iframes que tenham o display:none */
 
 //adicionando ao documento
 form.parentNode.appendChild(iframe);
 window.frames['micox-temp'].name="micox-temp"; //ie sucks
 
 //adicionando o evento ao carregar
 var carregou = function() { 
   removeEvent( $m('micox-temp'),"load", carregou);
   var cross = "javascript: ";
   cross += "window.parent.$m('" + id_elemento_retorno + "').innerHTML = document.body.innerHTML; void(0); ";
   
   $m(id_elemento_retorno).innerHTML = html_erro_http;
   $m('micox-temp').src = cross;
   //deleta o iframe
   setTimeout(function(){ remove($m('micox-temp'))}, 250);
  }
 addEvent( $m('micox-temp'),"load", carregou)
 
 //setando propriedades do form
 form.setAttribute("target","micox-temp");
 form.setAttribute("action",url_action);
 form.setAttribute("method","post");
 form.setAttribute("enctype","multipart/form-data");
 form.setAttribute("encoding","multipart/form-data");
 //submetendo
 form.submit();
 
 //se for pra exibir alguma imagem ou texto enquanto carrega
 if(html_exibe_carregando.length > 0){
  $m(id_elemento_retorno ).innerHTML = html_exibe_carregando;
 }
 
}

<fieldset>
<legend>Uso no blur do input</legend>
  <form>
    <input type="file" name="nome_qualquer" onblur="micoxUpload(this.form,'upa.php','recebe_up_onblur','Carregando...','Erro ao carregar')" />
    <div id="recebe_up_onblur" class="recebe"> </div>
  </form>
</fieldset>

lucas.exe · Novembro 30, 2009

O primeiro problema não sei resolver pois não mexo muito com o google chome;

O segundo:

acho que você coloca:

$m(id_elemento_retorno).innerHTML=Resposta;

para resolver bastaria colocar um sinal de mais:

$m(id_elemento_retorno).innerHTML+=Resposta;

Basta modificar do seu jeito.

diasgabrie · Novembro 30, 2009

obrigada, o problema do chrome resolvi.

mas o do conteudo da div ainda não deu certo. alguém tem alguma outra solução?

obrigada

lucas.exe · Novembro 30, 2009

Analizando seu codigo detalhadamente percebi o seguinte:

Enquanto está carregando aparece a mensagem na div "Carregando..."

Depois que enviada a foto, troca a frase "Carregando..." por "Erro ao carregar";

E por ultimo troca pelo resultado obitdo;

Solução:

/* funçõezinhas padrão pra facilitar */
function $m(quem){
 //apelido só pra não ficar repetindo o document.getElementById
 return document.getElementById(quem)
}
function remove(quem){
 quem.parentNode.removeChild(quem);
}
function addEvent(obj, evType, fn){
 //o velho do elcio.com.br/crossbrowser
    if (obj.addEventListener)
        obj.addEventListener(evType, fn, true)
    if (obj.attachEvent)
        obj.attachEvent("on"+evType, fn)
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, fn );
  } else {
    obj.removeEventListener( type, fn, false ); }
} 
/* a que faz o serviço pesado */
function micoxUpload(form,url_action,id_elemento_retorno,id_elemento_2,html_exibe_carregando,html_erro_http){
/******
* micoxUpload - Submete um form para um iframe oculto e pega o resultado. Consequentemente pode
*               ser usado pra fazer upload de arquivos de forma assíncrona.
* Use a vontade mas coloque meu nome nos créditos. Licença Creative Commons.
* Versão: 1.0 - 03/03/2007 - Testado no FF2.0 IE6.0 e OP9.1
* Autor: Micox - Náiron JCG - elmicox.blogspot.com - micoxjcg@yahoo.com.br
* Parametros:
* form - o form a ser submetido ou seu ID
* url_action - url pra onde deve ser submetido o form
* id_elemento_retorno - id do elemento que irá receber a informação de retorno
* html_exibe_carregando - Texto (ou imagem) que será exibido enquanto se carrega o upload
* html_erro_http - texto (ou imagem) que será exibido se der erro HTTP.
*******/

 //testando se passou o ID ou o objeto mesmo
 form = typeof(form)=="string"?$m(form):form;
 
 var erro="";
 if(form==null || typeof(form)=="undefined"){ erro += "O form passado no 1o parâmetro não existe na página.\n";}
 else if(form.nodeName!="FORM"){ erro += "O form passado no 1o parâmetro da função não é um form.\n";}
 if($m(id_elemento_retorno)==null){ erro += "O elemento passado no 3o parâmetro não existe na página.\n";}
 if(erro.length>0) {
  alert("Erro ao chamar a função micoxUpload:\n" + erro);
  return;
 }

 //criando o iframe
 var iframe = document.createElement("iframe");
 iframe.setAttribute("id","micox-temp");
 iframe.setAttribute("name","micox-temp");
 iframe.setAttribute("width","0");
 iframe.setAttribute("height","0");
 iframe.setAttribute("border","0");
 iframe.setAttribute("style","width: 0; height: 0; border: none;");
 /* Não usei display:none pra esconder o iframe
    pois tem uma lenda que diz que o NS6 ignora
    iframes que tenham o display:none */
 
 //adicionando ao documento
 form.parentNode.appendChild(iframe);
 window.frames['micox-temp'].name="micox-temp"; //ie sucks
 
 //adicionando o evento ao carregar
 var carregou = function() { 
   removeEvent( $m('micox-temp'),"load", carregou);
   var cross = "javascript:";
   cross += "window.parent.$m('"+id_elemento_retorno+"').innerHTML+=document.body.innerHTML;window.parent.$m('"+id_elemento_2+"').innerHTML=\"\"; void(0);";
   
   $m(id_elemento_2).innerHTML = html_erro_http;
   $m('micox-temp').src = cross;
   //deleta o iframe
   setTimeout(function(){ remove($m('micox-temp'))}, 250);
  }
 addEvent( $m('micox-temp'),"load", carregou)
 
 //setando propriedades do form
 form.setAttribute("target","micox-temp");
 form.setAttribute("action",url_action);
 form.setAttribute("method","post");
 form.setAttribute("enctype","multipart/form-data");
 form.setAttribute("encoding","multipart/form-data");
 //submetendo
 form.submit();
 
 //se for pra exibir alguma imagem ou texto enquanto carrega
if(html_exibe_carregando.length > 0){
  $m(id_elemento_2).innerHTML = html_exibe_carregando;
 }
 
}

<fieldset>
<legend>Uso no blur do input</legend>
  <form>
    <input type="file" name="nome_qualquer" onblur="micoxUpload(this.form,'upa.php','recebe_up_onblur','informa_dados','Carregando...','Erro ao carregar')" />
    <div id="informa_dados"> </div>
    <div id="recebe_up_onblur" class="recebe"> </div>
  </form>
</fieldset>

diasgabrie · Novembro 30, 2009

muito obrigada, ficou perfeito!

Brambilla · Julho 22, 2011

opa

estou usando está mesma função, bom quando faz o upload ela aparece Carregando..., mais em seguida não aprece mais nada e nem grava a imagem,

<form id="form_img" action="img_add.php" method="post" enctype="multipart/form-data" encoding="multipart/form-data"
name="form_img" >
<table width="100%" border="1" align="center" cellpadding="2" cellspacing="2" class="top_tab" style="background:#FFF" >
<tr>
 <td colspan="2" class="cab" align="center">Cadastrar Imagem para o produto: 
 <span style="color:#006; font-size:18px"><?php echo $id_produto;?></span></td>
 </tr>
<tr>
<td width="11%"> </td>
<td width="89%"><input name="id_produto" type="hidden" id="id_produto" value="<?php echo($id_produto); ?>" />
</td>
</tr>
<tr>
<td>
<div align="right">Imagem:</div></td>
<td align="left">
<?php
$sql=mysql_query("select * from foto where id_produto ='$id_produto'") or die ('xxx');
$num=mysql_num_rows($sql);
if($num == '')$num=0;
$pla=mysql_query("select * from cliente_plano where id_cliente='$id_cliente'") or die ('xxx');
$dd_pla=mysql_fetch_array($pla);
?>
<input type="file" name="img[]" id="img[]" /><div id="divCarreg" style="position:absolute; margin-left:300px; margin-top:-20px; float:right; height:25px"></div>
<div id="divExtra"></div>
<input type="hidden" value="<?php echo $num;?>" id="total_img" name="total_img" />
<?php 
if($dd_pla['qtd_foto'] > '1')
{
?>
<a href="#" onclick="javascript: AddCampo('divExtra', '<?php $dd_pla['qtd_foto'];?>');"  style="position:absolute; width:40px; height:10px" class="botao">Add +</a>
   <?php
}
?>
   <br /><br />
</td>
</tr>
<tr>
<td> </td>
<td>
  <!-- onclick="micoxUpload2(this.form,15, '<img src=\'img/load.gif\' /> <b>Carregando</b>', end_upload);"-->
<input type="button" name="Submit" value="Cadastrar" class="button" style="cursor:pointer" onclick="micoxUpload(this.form,'img_add.php','divUpImg','Carregando...','Erro ao carregar'); return false;" />

em seguida a img_add.php

$img = $_FILES['img'];
$pasta = '../images/fotos';
$contar = count($img['name']);
for($i = 0; $i < $contar; $i++)
	{
	$size=filesize($_FILES['img']['tmp_name'][$i]);
	$nome = $img['name'][$i];
	$nome = tira_acentos($nome);
	$tmp = $img['tmp_name'][$i];
	if(!empty($nome))
		{
		//random para foto não ter nomes iguais
		$min = 1000;
		$max = 9999;
		$resposta = rand($min,$max);
		//fim do random
		$caminho="../images/fotos/$resposta"; //caminho q será salvo a imagem
		$caminho=$caminho.$nome;
		$foto = $caminho;
		$diretorio = "../images/fotos/$resposta";
		/* Defina aqui o tipo de arquivo suportado */
		if (eregi(".jpg$", $nome))
			{
			$nome = tira_acentos($nome);
			copy($tmp,$diretorio.$nome);
			$nome = tira_acentos($nome);
			// diminuindo a imagem e exluindo a original
			$imagem = ''.$caminho.''; // Tipo: JPG
			$thumbnail = explode('.',$imagem);
			$thumbnail = '../'.$thumbnail[0]."_t.jpg";
			$imagem = '../'.$imagem;
			$caminho = '../'.$caminho;
			$img_origem = imagecreatefromjpeg($imagem);
			$origem_x = imagesx($img_origem); // Largura
			$origem_y = imagesy($img_origem); // Altura
			$x = 400; // Largura
			$y = 400; // Altura
			if($origem_x > $origem_y)
				{ // Se a largura for maior que a altura
				$final_x = $x; // A largura será a do thumbnail
				$final_y = floor($x * $origem_y / $origem_x); // A altura é calculada
				$f_x = 0; // Colar no x = 0
				$f_y = round(($y / 2) - ($final_y / 2)); // Centralizar a imagem no meio y do thumbnail
				}
			else
				{ // Se a altura for maior ou igual à largura
				$final_x = floor($y * $origem_x / $origem_y); // Calcula a largura
				$final_y = $y; // A altura será a do thumbnail
				$f_x = round(($x / 2) - ($final_x / 2)); // Centraliza a imagem no meio x do thumbnail
				$f_y = 0; // Colar no y = 0
				}
			$img_final = imagecreatetruecolor($x,$y);
			$cor_fundo = imagecolorallocate($img_final, 255, 255, 255);
			imagefilledrectangle($img_final, 0, 0, 500, 500, $cor_fundo);
			imagecopyresampled($img_final, $img_origem, $f_x, $f_y, 0, 0, $final_x, $final_y, $origem_x, $origem_y);
			imagejpeg($img_final, $thumbnail,90);
			imagedestroy($img_origem);
			imagedestroy($img_final);
			unlink(''.$caminho.''); // exclui a original
			$foto = $thumbnail;
			$foto = explode('../',$foto);
			$foto = $foto[1];
			$mos=mysql_query("select * from foto where id_produto='$id_produto' and mostra_foto=1") or die ('xxx');
			$num_mos=mysql_num_rows($mos);
			if($num_mos != '') { $mostra = '0'; } else {$mostra = '1';}
			$in = mysql_query("insert into foto (id_produto, caminho_foto, mostra_foto) values ('$id_produto', '$foto', '$mostra')") or die('xxx');
			}
		else	
			{
			echo 'Imagem - '.$i.' -- '.$nome.' : Atenção! Apenas são aceitos arquivos nos formatos JPEG ou JPG.<br>';
			}
		}
	}

Entrar

Arquivado

[Resolvido] upload assincrono

Recommended Posts

diasgabrie 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas.exe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

diasgabrie 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

lucas.exe 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

diasgabrie 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Brambilla 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante