Vamos lá.
Inclua o jQuery no seu projeto (é possível fazer com JavaScript puro, é só pesquisar na internet).
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
Inclua o código abaixo, ele irá chamar via AJAX a página responsável pelo envio das imagens quando algum dos botões for clicado.
<script>
function chamarUpload(btnId) {
$.ajax({
url: 'upload.php', //Altere pelo arquivo de upload
type: 'GET',
data: 'btnId=' + btnId,
success: function(data) {
$('#divLightbox').html(data); //Altere para o ID do modal
//Faça com que seu modal seja exibido
},
beforeSend: function() {
//Se quiser, coloque uma animação, tipo loading...
}
});
}
</script>
Altere o valor de url pro caminho do seu arquivo onde tem o form de upload, e dentro da function success, altere o divLightbox pro ID do seu "modal".
PS: se ao clicar no botão a página for atualizada, adicione return false;
no final da function acima (antes da última chave).
PS²: Se você reparar no código, estamos fazendo uma solicitação GET
, e estamos passando o parametro btnId
com o valor btnId que recebemos ao chamar a function. Esse valor deve ser referente ao ID do seu input
(cada input deve ter um ID diferente).
Sua página de upload, deve ter um código parecido com este
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
//Faça tudo que for necessário pro upload da imagem
//e conversão para MD5
//Não esqueça de dar o echo.
//O echo deve ser limpo, para exibir apenas o MD5, nada mais.
//Não remova o exit.
exit;
}
?>
<div id="content-upload">
<p>Somente arquivos JPEG, PNG e JPG são permitidos. O tamanho da imagem precisa ser menor que 5000KB</p>
<hr>
<form aciton="" method="post" id="form-upload">
<input type="file" id="imagem" name="imagem">
<button type="submit" id="btn-send">Enviar imagem</button>
</form>
</div>
<script>
$(function() {
$("#btn-send").click(function() {
$.ajax({
url: 'upload.php', //chame essa mesma página
type: 'POST',
data: $('#form-upload').serialize(),
success: function(data) {
$("#<?= $_GET['btnId']; ?>").val(data);
//Nesse momento, o MD5 da imagem já deve ter sido atribuido
//ao campo, então feche o modal.
},
beforeSend: function() {
//Se quiser defina um loading pro upload
}
});
return false;
});
});
</script>
Por fim, para chamar a página de upload e fazer ela ser incluída na div do seu modal, use o href
dos links como: javascript:chamarUpload(id do input que vai receber o md5);
Ficando assim
<a href="javascript:chamarUpload('input1');" title="Fazer upload">Upload</a>
Ou, em outros elementos, use o onclick, ficando assim:
<img src="..." onclick="chamarUpload('input1');">