1
I need to upload images inside a form. I wonder if it is possible to pass the parameters of the image upload form via ajax outside the general form? If yes, how would I do? I tried some ways, but none worked.
OBS: I am using validate.js to treat the other forms, when I insert a form inside another the validate returns "Settings" problems (the image form does not have btn Submit, occurs through the btn of choice of files). Follow the code of 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>
<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>';
}
}
}
?>
View this post:
 http://answall.com/questions/42823/fazer-upload-apenas-com-jquery-ajax-e-php
– GilCarvalhoDev