Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

KleuToN´s

Envio upload de imagem com Jquery + PHP sem refresh

Por , em PHP

Recommended Posts

KleuToN´s    0

KleuToN´s
Postado

Amigos eu gostaria de desenvolver o meu próprio script de envio de imagem, eu não quero esse sicripts prontos, pois quero ajustar as minha necessidades e design.
Porém não estou conseguindo passar para PHP a informação que vem do Input File o metodo $_POST funciona já o $_FILES sempre retorna vazio e por isso o php não faz o upload.

Lembrando que eu gostaria de enviar a imagem somente depois que clicar no botão submit.

 

Vejam o script, favor ajudem:

enviar.php

<?php
include('../login/config.php');

$conecta = mysql_connect(M_HOST,M_USUARIO,M_SENHA) or Data('2');
$banco = mysql_select_db(M_BD,$conecta) or Data('2');


$pasta = "img/tst/";
     
    /* formatos de imagem permitidos */
    $permitidos = array(".jpg",".jpeg",".gif",".png", ".bmp");
     
    if(isset($_POST)){
        $nome_imagem    = $_FILES['fotos']['name'];
        $tamanho_imagem = $_FILES['fotos']['size'];
         
        /* pega a extensão do arquivo */
        $ext = strtolower(strrchr($nome_imagem,"."));
         
        /*  verifica se a extensão está entre as extensões permitidas */
        if(in_array($ext,$permitidos)){
             
            /* converte o tamanho para KB */
            $tamanho = round($tamanho_imagem / 1024);
             
            if($tamanho < 1024){ //se imagem for até 1MB envia
                $nome_atual = md5(uniqid(time())).$ext; //nome que dará a imagem
                $tmp = $_FILES['fotos']['tmp_name']; //caminho temporário da imagem
                 
                /* se enviar a foto, insere o nome da foto no banco de dados */
                if(move_uploaded_file($tmp,$pasta.$nome_atual)){
				mysql_query("INSERT INTO d_dep (id,img) VALUES ('',".$nome_atual.")");
                    echo "<img src='img/tst/".$nome_atual."' id='previsualizar'>"; //imprime a foto na tela
                }else{
                    echo "Falha ao enviar".mysql_error();
                }
            }else{
                echo "A imagem deve ser de no máximo 1MB";
            }
        }else{
            echo "Somente são aceitos arquivos do tipo Imagem";
	   // echo para ver o que retorna
           echo $nome_imagem.$_POST['fotos'];
        }
    }else{
        echo "Selecione uma imagem";
        exit;
    }
?>

 

index.html 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="form_env" method="post" action="javascript:func()">
Foto
<input type="file" id="fotos" name="fotos" />
<input type="submit" value="SALVAR" class="btn btn-gebo pull-right">
</form>
<div id="st_env"></div>


<script type="text/javascript">
 $(function($) {
	$("#form_env").submit(function() {
		var fotos = $("#fotos").val();
		$("#st_env").html("<img src='img/ajax_loader.gif' alt='Enviando' />");
		$.post('enviar.php', {fotos: fotos}, function(resposta) {
				$("#st_env").slideDown();
				if (resposta != false) {
					$("#st_env").html("resposta");
				} 
				else {					
					$("#st_env").html("Imagem enviada com Sucesso");
				}
		});
	});
});
</script>

 

 

Alguém ai consegue entender onde estou errando?
Deste já agradeço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Saraiva    84

Ricardo Saraiva
Postado

Brother com ajax dessa forma você com certeza não ira conseguir.

Na verdade o que a maioria dos scripts que dizem enviar imagens com ajax eles crião um iframe.

 

Se não me engano até a sim a possibilidade de enviar arquivos com ajax mais o usuario teria que habilitar em seu navegador para javascript enviar arquivos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleuToN´s    0

KleuToN´s
Postado

Mais o JavaScript não estar enviando nada, e sim o arquivo .php a questão é que não estou conseguindo passar o que vem da variável imput File..ou estou enganado??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Saraiva    84

Ricardo Saraiva
Postado

Na verdade você esta enganado.

O jquery é um framework javascript ou seja você esta usando javascript para tentar enviar a imagem.

Dessa forma infelizmente amigo não ira funcionar para se enviar imagens sem reload eu conheço duas formas flash ou iframes ocultos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleuToN´s    0

KleuToN´s
Postado

Conseguir com usando o Plugin Jquery Forms:
http://www.malsup.com/jquery/form/#file-upload
http://www.malsup.com/jquery/form/progress.html

Sem necessidade de usar iframes ou Flash...
A questão é que eu queria pegar os dados vindos do imputs e gerar uma div com os mesmo, porém com esse plugin não consigo, mais com jquery puro sim. Se uso só jquery , não envio a img mais consigo gerar a nova div com os dados que foi inserido sem refresh, já se uso o Jquery Forms envio a img não não insiro a div.

Acho que vou ficar com usando Jquery Forms, ou usar como já sei usando o reaload sem Ajax

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ricardo Saraiva    84

Ricardo Saraiva
Postado

Se você der uma lidinha nessa pagina vera que em navegadores mais antigos que não tem suporte a XMLHttpRequest Level 2 ele ultiliza iframe.

http://www.malsup.com/jquery/form/#file-upload

 

 

vamos assim em relação a sua duvida dei uma olhadinha rapida em um exemplo no site, acho que isso pode le ajudar.

http://www.malsup.com/jquery/form/files-raw.php

 

aqui é a parte responsavel pelo retorno após o upload.

 else {
        // return text var_dump for the html request
        echo "VAR DUMP:<p />";
        var_dump($_POST);
        foreach($_FILES as $file) {
            $n = $file['name'];
            $s = $file['size'];
            if (!$n) continue;
            echo "File: $n ($s bytes)";
        }
    }

Só da uma estudada e adaptar o seu projeto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleuToN´s    0

KleuToN´s
Postado

A resposta por echo que vem do php eu entendi blz... já li varias coisa da api.

Porém é que a Div de cadastro é uma, e a div que exibe os já cadastros é outra, ai tipo o echo de Erro ou de Sucesso teve que ser apresentado na parte superior da Div de cadastro que é um box modal, já o echo que conteria a inclusão após o envio seria na Div que exibe, como a resposta vem do echo e ele usa uma unica div para exibe, eu fico preso a essa div.

Eu pensei em jogar na Div de inclusão via Jquery javascript ao invés do echo mais não dar certo.

Na API diz q para pegar o valor da variável seria esse cod, mais não funciona:
http://www.malsup.com/jquery/form/#api

// get the value of the password input 
var value = $('#myFormId :password').fieldValue(); 
alert('The password is: ' + value[0]);

 

onde entendi que 'myFormId' é o id do formulário, ':password' o name do imput e 'value[0]' a sequencia dos value solicitados

Compartilhar este post

Link para o post
Compartilhar em outros sites

KleuToN´s    0

KleuToN´s
Postado

Simplifiquei o código para vocês terem uma ideia:
index.php

<?php
include('db.php');
session_start();
$session_id='1'; //$session id
?>
<html>
<head>
</head>

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<!-- main bootstrap js -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- Bootstrap framework -->
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" />


<style>

body
{
font-family:arial;
}
.preview
{
width:200px;
border:solid 1px #dedede;
padding:10px;
}
#preview
{
color:#cc0000;
font-size:12px
}

</style>
<body>
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Enviar Imagem</a>
 
<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
    <h3 id="myModalLabel">Enviar Imagem</h3>
  </div>
<form id="myForm" method="post" enctype="multipart/form-data" action="javascript:func()">
  <div class="modal-body">
<div id='preview'>
</div>

Descricao: <input type="text" vname="desc"><br>
Upload:<input type="file" name="photoimg" id="photoimg" />
<br>

  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Sair</button>
<input type="submit" name="button" id="button" value="Enviar"  class="btn btn-primary">   
  </div>
</form>
</div>




<div id="mostrar">
<?php 
$sql = mysql_query("SELECT * FROM tabela order by id");
while($img = mysql_fetch_array($sql)){ 
 ?>
  <option value="<?php echo $img[id]; ?>" <?php if($cid[id]==$cob[cid]){ echo 'selected="slected"'; }?>><?php echo $cid[nome]; ?></option>

<div style="margin-bottom:10px; border-bottom:1px solid #999;">Descricao:<?php echo $img[desc];?><br>
Foto: <?php echo $img[img]; ?><br></div>
  <?php } ?>

</div>
<script>
$(document).ready(function() { 
    var options = { 
        target:        '#preview',
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse,  // post-submit callback 
	    url:       'ajaximage.php',       
        type:      'post',       
        resetForm: true,       
    }; 
 
    $('#myForm').submit(function() { 
        $(this).ajaxSubmit(options); 
        return false; 
    }); 
}); 
function showRequest(formData, jqForm, options) { 
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
} 
function showResponse(responseText, statusText, xhr, $form)  { 
//aqui entra o que vem depois do sucess
$("#mostrar").html("<div style='margin-bottom:10px; border-bottom:1px solid #999;'>Descricao: img[desc] <br> Foto: img[img] <br></div>");
} 
</script>
</body>
</html>

Nesse comando é onde eu deveria pegar as variáveis que foi no submit
img[desc] img

ajaximage.php

<?php
include('db.php');
session_start();
$session_id='1'; //$session id
$path = "uploads/";
$valid_formats = array("jpeg","jpg", "png", "gif", "bmp");
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
		{$name = $_FILES['photoimg']['name'];
		$size = $_FILES['photoimg']['size'];
			if(strlen($name))
				{
					list($txt, $ext) = explode(".", $name);
					if(in_array($ext,$valid_formats))
					{
					if($size<(10240*1024))
						{
							$actual_image_name = time().substr(str_replace(" ", "_", $txt), 5).".".$ext;
							$tmp = $_FILES['photoimg']['tmp_name'];
							if(move_uploaded_file($tmp, $path.$actual_image_name))
								{
								mysql_query("INSERT INTO tabela (id,desc,img)
VALUES ('','".$_POST[desc]."','$actual_image_name');");
								echo "<img src='uploads/".$actual_image_name."'  class='preview'>";
								}
							else
								echo "failed";
						}
						else
						echo "Image file size max 1 MB";					
						}
						else
						echo "Invalid file format..";	
				}
				
			else
				echo "Please select image..!";
				
			exit;
		}
?>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos PHP
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito