Enviar valor de input file via ajax sem formulario

[kaefer 0]

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!

[William Bruno 1501]

Exemplo:

 

http://wbruno.com.br/ajax/upload-de-arquivos-e-dados-com-ajax/

[kaefer 0]

Bom dia Bruno, obrigado por responder, desculpe a ignorância, eu sou novo no mundo de jquery e mas novo ainda em ajax. Pelo o que eu entendi através do seu artigo. você ainda sim usa o <form>, eu gostaria de usar apenas os 2 inputs dentro de uma div class, sem o formulário, e passar a imagem apenas com o input, isso seria possível? Abraço!

[William Bruno 1501]

Tanto faz se o form está lá ou não.

 

O ajax que faz o trabalho. A tag form só existe por semântica.

E não há nenhum motivo para não usar ele.