Boa noite senhores, preciso realizar o upload de imagens porem dentro de um formulário. Eu gostaria de saber se é possível passar os parâmetros do formulário de upload da imagem via ajax por fora do formulário geral? Sem sim, como eu faria? tentei algumas formas, mas nenhuma deu certo.
OBS: estou usando o validate.js pra tratar os demais formulário, quando insiro um form dentro de outro o validate retorna problemas "Settings" (o form da imagem não tem btn submit, ocorre através do btn de escolha de arquivos). Segue o código da parte de upload abaixo:
$(document).ready(function() { $('.photoimg').off('click').on('change', function() { //$("#preview").html(''); $(this).parent().parent().parent().find(".imageform").ajaxForm({ target: $(this).parent().parent().parent().find('.preview'), beforeSubmit: function() { console.log('Antes de enviar'); $(this).find(".imageloadstatus").show(); $(this).find(".imageloadbutton").hide(); }, success: function() { console.log('Envio com sucesso'); $(this).find(".imageloadstatus").hide(); $(this).find(".imageloadbutton").show(); }, error: function() { console.log('Erro ao realizar operação'); $(this).find(".imageloadstatus").hide(); $(this).find(".imageloadbutton").show(); } }).submit(); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='conteudo'> <div class='preview'></div> <form class="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both"> <h1>Escolha as imagens a carregar</h1> <div class='imageloadstatus' style='display:none'> <img src="loader.gif" alt="A carregar...."> </div> <div class='imageloadbutton'> <input type="hidden" name="indice" value="a1z"> <input type="file" name="photos[]" class="photoimg" multiple="true"> </div> </form> </div> <br> <br> <br> <br> <div class='conteudo'> <div class='preview'></div> <form class="imageform" method="post" enctype="multipart/form-data" action='ajaxImageUpload.php' style="clear:both"> <h1>Escolha as imagens a carregar</h1> <div class='imageloadstatus' style='display:none'> <img src="loader.gif" alt="A carregar...."> </div> <div class='imageloadbutton'> <input type="hidden" name="indice" value="2"> <input type="file" name="photos[]" class="photoimg" multiple="true"> </div> </form> </div>
<?php error_reporting(0); session_start(); define("MAX_SIZE","9000"); function getExtension($str) { $i = strrpos($str,"."); if (!$i) { return ""; } $l = strlen($str) - $i; $ext = substr($str,$i+1,$l); return $ext; } $valid_formats = array("jpg", "png", "gif", "bmp","jpeg"); if (isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST") { $uploaddir = "uploads/"; // directoria que vai receber os ficheiros foreach ($_FILES['photos']['name'] as $name => $value) { $filename = stripslashes($_FILES['photos']['name'][$name]); $size=filesize($_FILES['photos']['tmp_name'][$name]); /* Recolhe extensão do ficheiro em caixa baixa (lowercase) */ $ext = getExtension($filename); $ext = strtolower($ext); if (in_array($ext,$valid_formats)) { if ($size < (MAX_SIZE*1024)) { $image_name=$_POST['indice'].'_'.$filename; $newname=$uploaddir.$image_name; if (move_uploaded_file($_FILES['photos']['tmp_name'][$name], $newname)) { /* ficheiro carregado com sucesso, * envia HTML com imagem para apresentar ao visitante */ echo "<img src='".$uploaddir.$image_name."' class='imgList'>"; } else { echo '<span class="imgList">Ficheiro não foi carregado!</span>'; } } else { echo '<span class="imgList">Limite de tamanho atingido!</span>'; } } else { echo '<span class="imgList">Extensão do ficheiro desconhecida!</span>'; } } } ?>
Agradeço desde já qualquer tipo de ajuda! Abraço a todos!