I need to upload images inside a form. I would like to know if it is possible to pass parameters from the image upload form via ajax outside the general form? If so, how would I do it? I tried some forms, but none worked.
NOTE: I am using validate.js to treat the other forms, when I insert one form into another, the validate returns "Settings" problems (the image form does not have btn submit, it occurs through the btn file choice) . Here is the code for the upload part below:
$(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();
});
}); body {
font-family: sans-serif;
}
.preview {
color: #cc0000;
font-size: 12px
}
.imgList {
max-height: 150px;
margin-left: 5px;
border: 1px solid #dedede;
padding: 4px;
float: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass='conteudo'><divclass='preview'></div><formclass="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>';
}
}
}
?>