Upload com barrinha e porcentagem

laurolopes · Setembro 18, 2007

Uma pergunta... Tem restrição quanto ao tamanho do arquivo que vai fazer upload?Se sim,como alterar isso. E tem restrição quanto ao número de arquivos enviados a pasta. Obrigado.

dyggos · Setembro 21, 2007

Salve povo!

Durante dias naveguei em vários sites a procura de um sisteminha de upload que não matasse meu código e muito menos deixasse ele mais lerdo que uma lesma no azulejo. E vi q aqui mesmo vira e mexe sempre vem alguém atrás da mesma coisa...UPLOAD com PROGRESSBAR e PORCENTAGEM e eu descobri um bala...leve e perfeito.

95% do código foram feitos pela galera do http://swfupload.mammon.se/ apenas inseri a porcentagem e concertei outros bugs que rolavam quando enviava um arquivo....Então vamos lá!

Você pode baixar o arquivo com todos os códigos necessários no final da pagina.

Nao consegui enviar o arquivo entao mandei para um server proprio...depois se o MOD tiver como deixar aq no forum e melhor pois nao sei quanto tempo rola desse arquivo ficar no server q eu coloquei.

LINK: http://www.guernieri.com.br/upload/upload.rar

O que o código faz é simples ele usa 2 arquivinhos em .JS que controlam todo o envio e recebimento das informações, 1 .SWF que envia a porcentagem para o JS e tb cuida do envio e 1 .PHP que faz o envio do arquivo.

Explicando assim parece meio complicado mas baixem o arquivo ai e vejam se ta legal.

Achei interessante o script, mto rapido mesmo, desde que seja arquivos de imagens, tentei upar outras extensões e não funcionou, até adicionei outras no arquivo index.php, e mesmo assim ele não faz o UP.

Outra coisa que observei foi que ele não carrega toda pagina INDEX.php. deve ter alguma coisa trancando o script, provavelmente o JS.

Alguem conseguiu fazer funcionar???

Hospeda SUL · Setembro 24, 2007

E ai galeraaaa, bah to quebrando a cabeça para fazer dois ou mais uploads, tipo tentando colocar dois outres botões para mais uploads mas não to conseguindo, acho que a configuração fo file deve estar no flash pq nao encontrei lá. Alguem conseguiu fazer com dois ou tres botoes, na verdade queria enviar tres fotos mas limitando tipo, mandar no máximo tres fotos.Ajudem ai please!

Hospeda SUL · Setembro 24, 2007

Bom com gambiarra mas to quase lá...

Seguinte consegui fazer o upload de 4 imagens, so que ta injambrado huahuahuhua. Oq vocês acham, deem dicas ai para melhorar...

Alterei os dois arquivos:

SCRIPT: example.js

function $(id) {	this.obj = document.getElementById(id);	return this.obj;}$.prototype.ih = function() {	}// Default upload start function.uploadStart = function(fileObj) {	document.getElementById('btSend').style.display = 'none'; 	$("filesDisplay").style.display = "block";			var li = document.createElement("li");	var txt = document.createTextNode(fileObj.name);	li.className = "uploading";	li.id = fileObj.name;		var prg = document.createElement("span");	prg.id = fileObj.name + "progress";	prg.className = "progressBar"		li.appendChild(txt);	li.appendChild(prg);	$("mmUploadFileListing").appendChild(li);		}uploadProgress = function(fileObj, bytesLoaded) {	var progress = $(fileObj.name + "progress");	var percent = Math.ceil((bytesLoaded / fileObj.size) * 100)		progress.style.background = "url(jscripts/SWFUpload/images/progressbar.png) no-repeat -" + (100 - percent) + "px 0";	document.getElementById('percent').innerHTML = percent +"%";	}uploadComplete = function(fileObj) {	$(fileObj.name).className = "uploadDone";	$(fileObj.name).innerHTML += "Tamanho: " + (Math.ceil(fileObj.size / 1024)) + " kb";	document.getElementById('percent').innerHTML = "<b>Completo</b>";}uploadQueueComplete = function(fileObj) {if(document.form.count.value==1111){return false;}else{var conta = document.form.count.value;document.form.count.value = conta + 1;document.getElementById('btSend').style.display = 'block'; }}uploadCancel = function() {	//alert("You pressed cancel!");	$("SWFUpload").ih();}

SCRIPT INDEX.PHP

<html xmlns="http://www.w3.org/1999/xhtml" ><head>	<title>SWFUpload beta</title>	<script type="text/javascript" src="jscripts/SWFUpload/mmSWFUpload.js"></script>	<script type="text/javascript" src="jscripts/example.js"></script>	<style type="text/css">	body, pre {	font-family: "Trebuchet MS", Arial, Sans-serif;	}	h1 {	background: url(jscripts/SWFUpload/images/common/big_logo.png) no-repeat;	width: 150px;	height: 206px;	}	h1 span {	display: none;	}	h2 {	font-size: 20px;	font-weight: normal;	}	p, li, pre {	font-size: 13px;	}	pre {	color: #666666;	font-family: monospace;	font-size: 12px;	}	#wrapper {	width: 150px;	margin: 0 auto;	}	#content {	padding: 0 0 0 20px;	}	.clr {	clear: both;	}	/* SWFUpload CSS */	#filesDisplay {	padding: 10px;	margin-top: 20px;	background: #f9f9f9;	border: 1px solid #f3f3f3;	display: none;	}		#percent{	font: Trebuchet MS;	font-size: 11px;	}		#SWFUpload {	margin-left: 20px;	}	#mmUploadFileListing {	margin: 0;	padding: 0;	}	#mmUploadFileListing li {	margin: 0 0 10px 0;	display: block;	float: left;	width: 120px;	list-style-type: none;	font-size: 11px;	}	.uploading { color: #CCC; }	.uploadDone { color: #000; }	span.progressBar {	width: 100px;	display: block;	font-size: 10px;	height: 4px;	margin-top: 4px;	}	a.SWFUploadLink {	  width: 300px;	  height: 100px;	  background: url(jscripts/SWFUpload/images/custom_button.png) no-repeat;	  display: block;	}		a.SWFUploadLink:hover {	  background: url(jscripts/SWFUpload/images/custom_button_over.png) no-repeat;	}  </style></head><body>	<div id="wrapper">	  <div id="SWFUpload">				<form action="" name="" id="" onSubmit="return false;">					<input type="file" name="upload" />					<input type="submit" value="Upload" onClick="java script:alert('disabled...'); return false;" />		</form>	  </div>						<div id="filesDisplay">				<ul id="mmUploadFileListing"></ul>				<br class="clr" />				<div id="percent"></div>			</div>						<br />	<script type="text/javascript">	  mmSWFUpload.init({	  debug : false,	  upload_backend : "../../upload.php",	  target : "SWFUpload",	  link_mode : "standalone",	  link_text : "Upload",	  // css_class : "myCustomClass",	  allowed_filesize : "10000000",	  allowed_filetypes : "*.gif;*.jpg;*.png;*.mp3;*.wav,*.wma",	  upload_start_callback : 'uploadStart',	  upload_progress_callback : 'uploadProgress',	  upload_complete_callback : 'uploadComplete',	  // upload_error_callback : 'uploadError',	  upload_cancel_callback : 'uploadCancel',	  upload_queue_complete_callback : 'uploadQueueComplete'	  });	</script>	</div>	<div id="btSend"><a href="java script:mmSWFUpload.callSWF();"><img src="jscripts/SWFUpload/images/btn_upload_click.png" border="0"></a>	  <form action="" method="post" name="form" id="form">		<input name="count" type="hidden" id="count" value="1">			</form>	</div></body></html>

Pow galera não custa nada, ajuda ai....

T.P. · Setembro 24, 2007

Eu estou precisando enfiar um barrinha dessa num sistema de upload em php via FTP.... ta dificil..... <_</>

Hospeda SUL · Setembro 25, 2007

Fala novamente galera... Bom hoje tava de folga então me dediquei a terminar logo este script, consegui fazer o upload de multiplos arquivos, vejam como ficou.

http://www.hospedasul.com.br/Script_Upload_V1.1.zip

Lembrando que não fui eu que criei este código, o codigo original está no topo deste tópico, porem o mesmo so fazia o upload de uma imagen e alterei da forma como eu precisava, comentem ai oq acharam!!!

Só um detalhe, vocês vão ver que mudei o nome da foto que aparece, ao inves de aparecer o nome da foto real que a pessoa enviou ele mostra o texto foto 1, foto2 etc, pq isso? Bom fiz o teste enviando fotos com nomes bastante extensos e ficou todo desformatado o layout dos uploads...

Diego Henrique · Outubro 5, 2007

Olá, alguem tem a versão 1.1 para disponibilizar, ta quebrado o link acima...[]'s

Fabyo · Outubro 11, 2007

Mais um exemplo ta cada vez melhor = )

http://www.max-bazhenov.com/dev/upload-dialog.php

Juninho14 · Dezembro 11, 2007

eu so kero aceitar upload de imagens no script do inicio do post, dai queria mostrar a img q foi enviada assim como o endereco dela.. alguem pode me ajudar?

Creio que o post perdeu um pouco o sentido e ninguem mais esta falando sobre o script do topico.

Se alguem puder ajudar eu agradeço ;)/>

abração

Xogum · Dezembro 23, 2007

To tentando fazer algumas moficações no sistema...

E gostaria de saber como eu poderia aumentar a barrinha de progresso? Eu já aumentei a imagem, mas não foi, tem que mudar algo no script? Aonde?

Desde já, parabéns pelo sistema.

Abraço.

JavaBoy · Janeiro 17, 2008

Simples e útil.

Baseano no primeiro exemplo alguém sabe como adicionar algumas funções como:

Tamanho máximo, Largura, Altura e gravar no banco?

Beto Lima · Setembro 30, 2008

Muito bom essa solução pra upar várias imagens. Na verdade não vi nada melhor até hoje.

Queria tirar uma dúvida quanto ao php dele.

<?php

$ftmp = $_FILES['Filedata']['tmp_name'];

$fname = getcwd() . "/upload/".$_FILES['Filedata']['name'];

move_uploaded_file($ftmp, $fname);

?>

<h1>Uploaded Files</h1>

<pre>

<?php echo $_POST["Filename"];?>

</pre>

Esse php faz de fato a upagem das imagens....beleza.

Minha dúvida é o seguinte:

Tem como adaptar esse código acima para que gere thumbs conforme o código abaixo?

class.upload.php

<?php
set_time_limit(0);
include "funcoes.php";
include "conexao.php";
class Upload
{
	var $arquivo = "";
	var $erro = array ( "0" => "<script language=javascript>window.alert('\"Foto Enviada com sucesso!\"')
</script>",
						"1" => "<script language=javascript>window.alert('\"O arquivo é maior que o permitido pelo Servidor!\"')
</script>", 
						"2" => "<script language=javascript>window.alert('\"O arquivo é maior que o permitido pelo formulario!\"')
</script>",
						"3" => "<script language=javascript>window.alert('\"O upload do arquivo foi feito parcialmente!\"')
</script>", 
						"4" =>"<script language=javascript>window.alert('\"Não foi feito o upload do Arquivo!\"')
</script>");
	  

	function Verifica_Upload()
	{
		
		//$this->arquivo = isset($_FILES['arquivo']) ? $_FILES['arquivo'] : FALSE;
		$this->arquivo = $_FILES['arquivo'];
		if(!is_uploaded_file($this->arquivo['tmp_name'])) {
			return false;
		}  
		//}  
		$get = getimagesize($this->arquivo['tmp_name']);
		
		if($get["mime"] != "image/jpeg")
		{	
			echo "<span style=\"color: white; border: solid 1px; background: red;\">Esse foto nao é uma imagem valida</span>";
			exit;
		}
		return true;
	}

	function Envia_Arquivo()
	{
		if($this->Verifica_Upload()) {
			$this->gera_fotos();
			return true;		
		} else {
			echo "<span style=\"color: white; border: solid 1px; background: red;\">".$this->erro[$this->arquivo['error']]."</span>";
		}
	}
	
	function gera_fotos()
	{
		$diretorio = "fotos/";
		if(!file_exists($diretorio))
		{
			mkdir($diretorio);
		}
		
		$nome_foto  = "imagem_".time().".jpg";		
		$nome_thumb = "thumb_".time().".jpg";
		
	  //determino uma resolução maxima e se a imagem for maior ela sera reduzida
		$get = getimagesize($_FILES['arquivo']['tmp_name']);
		$largura=640;
		$altura=480;
		$escala_x=$get[0]/$largura;
		$escala_y=$get[1]/$largura;
		$_imgx=$get[0]/$escala_y;
		$_imgy=$get[1]/$escala_x;
		if($get[0]>$get[1]){
			if($get[0]>$largura){
				reduz_imagem($this->arquivo['tmp_name'], $largura, $_imgy, $diretorio.$nome_foto);
			}elseif($get[1]>$altura){
				reduz_imagem($this->arquivo['tmp_name'], $_imgx, $altura, $diretorio.$nome_foto);
			}
		}else{
			if($get[1]>$altura){
				reduz_imagem($this->arquivo['tmp_name'], $_imgx, $altura, $diretorio.$nome_foto);
			}elseif($get[0]>$largura){
				reduz_imagem($this->arquivo['tmp_name'], $largura, $_imgy, $diretorio.$nome_foto);
			}
		}	   
				//passo o tamanho da thumbnail
		reduz_imagem($this->arquivo['tmp_name'], 100, 75, $diretorio.$nome_thumb);
		echo "<span style=\"color: white; border: solid 1px; background: blue;\">".$this->erro[$this->arquivo['error']]."</span>";
		
						
		$sql = "insert INTO colecao (thumbnail, imagemG) Values ('$nome_thumb','$nome_foto')";
		$query = mysql_query($sql);
		
		//mysql_close($conexao);
		
	}	
}

?>

funcoes.php

<?php
//########################  Função para imagem JPEG ###########################

function reduz_imagem($img, $max_x, $max_y, $nome_foto) {

//pega o tamanho da imagem ($original_x, $original_y)
list($width, $height) = getimagesize($img);

$original_x = $width;
$original_y = $height;

// se a largura for maior que altura
if($original_x > $original_y) {
   $porcentagem = (100 * $max_x) / $original_x;	  
}
else {
   $porcentagem = (100 * $max_y) / $original_y;  
}

$tamanho_x = $original_x * ($porcentagem / 100);
$tamanho_y = $original_y * ($porcentagem / 100);

$image_p = imagecreatetruecolor($max_x,$max_y);
$image   = imagecreatefromjpeg($img);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $max_x,$max_y, $width, $height);


return imagejpeg($image_p, $nome_foto, 80);

}
//########################  Função para imagem GIF ###########################
	
	function reduz_imagem_gif($img, $max_x, $max_y, $nome_foto) {
		
		//pega o tamanho da imagem ($original_x, $original_y)
		list($width, $height) = getimagesize($img);
		
		$original_x = $width;
		$original_y = $height;
		
		// se a largura for maior que altura
		if($original_x > $original_y) {
			$porcentagem = (100 * $max_x) / $original_x;
			} else {
				$porcentagem = (100 * $max_y) / $original_y;
		}
		
		$tamanho_x = $original_x * ($porcentagem / 100);
		$tamanho_y = $original_y * ($porcentagem / 100);
		
		$image_p = imagecreatetruecolor(100,75);
		$image   = imagecreatefromgif($img);
		
		imagecopyresampled($image_p, $image, 0, 0, 0, 0, 100,75, $width, $height);
		
		return imagegif($image_p, $nome_foto, 80);
	}
	
	

//########################  Função para imagem PNG ###########################
	
	function reduz_imagem_png($img, $max_x, $max_y, $nome_foto) {
		
		//pega o tamanho da imagem ($original_x, $original_y)
		list($width, $height) = getimagesize($img);
		
		$original_x = $width;
		$original_y = $height;
		
		// se a largura for maior que altura
		if($original_x > $original_y) {
			$porcentagem = (100 * $max_x) / $original_x;
			} else {
				$porcentagem = (100 * $max_y) / $original_y;
		}
		
		$tamanho_x = $original_x * ($porcentagem / 100);
		$tamanho_y = $original_y * ($porcentagem / 100);
		
		$image_p = imagecreatetruecolor(100,75);
		$image   = imagecreatefrompng($img);
		
		imagecopyresampled($image_p, $image, 0, 0, 0, 0, 100,75, $width, $height);
		
		return imagepng($image_p, $nome_foto, 80);
	}

?>

mulletsp · Outubro 17, 2008

E junto com esse thumb da pra manda pro mysql quais foram postadas e onde tao ?

Aguardamos !

Eli Lopes · Abril 25, 2009

E junto com esse thumb da pra manda pro mysql quais foram postadas e onde tao ?

queria saber já usaram banco de dados (ex. mysql)?

Achein um código para ajudar a melhorar esse tópico ~> Usando SWFUpload com CakePHP http://blog.cakephp-brasil.org/2008/12/20/...ad-com-cakephp/

Download do código: http://blog.cakephp-brasil.org/wp-content/...2/swfupload.zip

O cara diz assim: "O banco pode ficar de qualquer jeito, no controller é que você vai saber, veja na linha:

$this->Photo->save(array(’Photo’ => array(’building_id’ => $id, ‘arquivo’ => $this->SwfUpload->filename, ‘descricao’ => ”)));

Ali estou salvando no banco com o campo building_id sendo o id passado, o campo ‘arquivo’ com o caminho onde foi salvo o arquivo e deixando a descrição vazia.

Todos esses campos são opcionais, você poderia até ter mais campos, ou até mesmo nem ter banco se quiser. O que importa é o valor do SwfUpload->filename… Ele é uma string (se você vai criar a tabela no banco, pode criar uma varchar)."

Eu não entendi bem.

Outro: http://www.tehuber.com/article.php?story=20080506115842319

Esse aqui trabalha com miniaturas (thumbnails) ~> http://alexandermakhno.com/blog/?p=390

Documentação do SWFupload ~> http://demo.swfupload.org/Documentation/#gettingstarted

Arquivado

Upload com barrinha e porcentagem

Recommended Posts

laurolopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

dyggos 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hospeda SUL 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hospeda SUL 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

T.P. 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Hospeda SUL 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Diego Henrique 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabyo 66

Compartilhar este post

Link para o post

Compartilhar em outros sites

Juninho14 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Xogum 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

JavaBoy 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Beto Lima 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

mulletsp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Eli Lopes 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Javascript - Calcular Valores Monetário em Tempo Real

JavaScript - Exibir logo dentro da Tabela html

PHP+Codeigniter - Implementar o Input CÓDIGO ou ID do Produto

Fóruns

Tempo Real

Informação importante