0
I have a page HTML
and a page on PHP
where I receive 2 files being one audio and the other an image and some input information.
I would like the moment you make the post not redirect to the PHP
, then open a window, a modal and display a gif
loading and when finished firing a message to the user.
How could I do this using AJAX?
<div class="form-group">
<label class="col-sm-3 control-label">Título</label>
<div class="col-sm-6">
<input type="text" class="form-control">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Texto</label>
<div class="col-sm-6">
<textarea class="form-control" style="padding: 0px 0px 30px;resize: none;"></textarea>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Imagem para Campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-new thumbnail" style="width: 200px; height: 150px;">
<img src="http://placehold.it/190x140/7761A7/ffffff" alt="...">
</div>
<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
<div>
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar imagem</span><span class="fileinput-exists">Alterar</span><input type="file" name="..."></span>
<a href="#" class="btn btn-danger fileinput-exists" data-dismiss="fileinput">Remover</a>
</div>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Áudio para a campanha</label>
<div class="col-sm-6">
<div class="fileinput fileinput-new" data-provides="fileinput"><input name="..." value="" type="hidden">
<span class="btn btn-primary btn-file"><span class="fileinput-new">Selecionar áudio</span><span class="fileinput-exists">Alterar</span><input name="" type="file"></span>
<span class="fileinput-filename"></span>
<a href="#" class="close fileinput-exists" data-dismiss="fileinput" style="float: none">×</a>
</div>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-6">
<button data-toggle="modal" data-target="#md-default" type="button" class="btn btn-info btn-lg"><i class="fa fa-check"></i> <b>Enviar</b></button>
<!-- Modal -->
<div class="modal fade" id="md-default" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button " class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<div class="i-circle primary"><i class="fa fa-check"></i></div>
<h4>Confirma o envio?</h4>
<p></p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default btn-flat" data-dismiss="modal">Cancelar</button>
<button type="button" class="btn btn-primary btn-flat" data-dismiss="modal">Sim</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
</div>
</div>
</div>
PHP
if(isset($SUBIMIT))
{
$name = $_FILES["fileUpload"]["name"];
//$nome_imagem = $name[0];
if(isset($_FILES['fileUpload']))
{
require 'WideImage/WideImage.php';
date_default_timezone_set("Brazil/East");
$name = $_FILES['fileUpload']['name'];
$tmp_name = $_FILES['fileUpload']['tmp_name'];
$allowedExts = array(".gif", ".jpeg", ".jpg", ".png", ".bmp");
$dir1 = 'uploads/';
for($i = 0; $i < count($tmp_name); $i++)
{
$ext = strtolower(substr($name[$i],-4));
if(in_array($ext, $allowedExts))
{
$new_name = date("Y.m.d-H.i.s") ."-". $i . $ext;
$image = WideImage::load($tmp_name[$i]);
$image = $image->resize(170, 180, 'outside');
$image = $image->crop('center', 'center', 170, 180);
$image->saveToFile($dir1.$new_name);
$nome_imagem = $new_name;
}
}
}
}
if (isset($SUBIMIT))
{
$name = $_FILES["fileUploadAudio"]["name"];
$fileName = $_FILES["fileUploadAudio"]["name"]; // The file name
$fileTmpLoc = $_FILES["fileUploadAudio"]["tmp_name"]; // File in the PHP tmp folder
$fileType = $_FILES["fileUploadAudio"]["type"]; // The type of file it is
$fileSize = $_FILES["fileUploadAudio"]["size"]; // File size in bytes
$fileErrorMsg = $_FILES["fileUploadAudio"]["error"]; // 0 for false... and 1 for true
$tmp_name = $fileTmpLoc;
for ($i = 0; $i < count($tmp_name); $i++)
{
$ext = strtolower(substr($name[$i], -4));
$new_name = date("Y.m.d-H.i.s") . "-" . $i . $ext;
if (!$fileTmpLoc)
{ // if file not chosen
echo "ERROR: Please browse for a file before clicking the upload button.";
exit();
}
//if (move_uploaded_file($fileTmpLoc[$i], "uploads_audios/$new_name"))
if (move_uploaded_file($fileTmpLoc[$i], "uploads_audios/$new_name"))
{
/*echo "$fileName|Upload is complete";
echo "<br />";
echo "<audio controls>";
echo "<source src='uploads_audios/$fileName' type='audio/mpeg'>";
echo "Your browser does not support the audio element.";
echo "</audio>";
*/
}
else
{
echo "move_uploaded_file function failed";
}
}
}
Edit your question and post what you have already done, it will be easier to help you. What’s more, what is the reason for modal?
– Marcelo de Andrade
I answered a similar question a while ago with a functional example: http://answall.com/questions/142834/enviando-uma-imagem-e-outros-dados-via-jquery-para-php . I think it is a good starting point. As for the modal with gif, create before
success: ...
a function that isbeforeSend: function() { ...
– Miguel
Thanks Miguel I’ll take a look, if it works I’ll come back here to warn.
– William