In a form, to send a photo, I use an iframe. This is responsible for loading the photo and sending it to the Server folder. When I pass the mouse over an input on my other page (onMouseOver), I get the file path, since I have an input in the iframe page, which I left as "hidden". The question is this: I would like that when the file was uploaded, the input on my main page would receive the data automatically, with no onMouseOver, onClick ... I would like to leave this field "hidden" so that the person has not access to the Server images folder.
Development page: link All of this is in the "student" enrollment section.
Code snippet:
<!-- Envio de Documento -->
<div class="form-group">
<label class="col-md-4 control-label" for="nome">Documento:</label>
<div class="col-md-8">
<iframe width="100%" name="frmfoto1" height="100" frameborder="0" src="documento/index.php"></iframe>
</div>
<div class="form-group"></div>
<div class="col-md-12">
<script type="text/javascript">
function txfoto1() {
var valor = window.parent.frmfoto1.document.getElementById('foto1').value;
$('#foto1').val(valor);
}
</script>
<label class="col-md-4 control-label" for="nome">Link:</label>
<div class="col-md-8">
<input id="foto1" name="foto1" type="text" class="form-control input-md" onMouseOver="txfoto1()"/>
</div>
</div>
</div>
Any ideas?
Shipping page:
<!DOCTYPE html>
<meta charset="utf-8">
<title>Envio de Documento:</title>
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script><scriptsrc="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="js/canvas-to-blob.min.js"></script>
<script src="js/resize.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript">
// Iniciando biblioteca
var resize = new window.resize();
resize.init();
// Declarando variáveis
var imagens;
var imagem_atual;
// Quando carregado a página
$(function ($) {
// Quando selecionado as imagens
$('#imagem').on('change', function () {
enviar();
});
});
/*
Envia os arquivos selecionados
*/
function enviar()
{
// Verificando se o navegador tem suporte aos recursos para redimensionamento
if (!window.File || !window.FileReader || !window.FileList || !window.Blob) {
alert('O navegador não suporta os recursos utilizados pelo aplicativo');
return;
}
// Alocando imagens selecionadas
imagens = $('#imagem')[0].files;
// Se selecionado pelo menos uma imagem
if (imagens.length > 0)
{
// Definindo progresso de carregamento
$('#progresso').attr('aria-valuenow', 0).css('width', '0%');
// Escondendo campo de imagem
$('#imagem').hide();
// Iniciando redimensionamento
imagem_atual = 0;
redimensionar();
}
}
/*
Redimensiona uma imagem e passa para a próxima recursivamente
*/
function redimensionar()
{
// Se redimensionado todas as imagens
if (imagem_atual > imagens.length)
{
// Definindo progresso de finalizado
$('#progresso').html('Imagen(s) enviada(s) com sucesso');
// Limpando imagens
limpar();
// Exibindo campo de imagem
$('#imagem').show();
// Finalizando
return;
}
// Se não for um arquivo válido
if ((typeof imagens[imagem_atual] !== 'object') || (imagens[imagem_atual] == null))
{
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
return;
}
// Redimensionando
resize.photo(imagens[imagem_atual], 1024, 'dataURL', function (imagem) {
// Salvando imagem no servidor
$.post('ajax/salvar.php', {imagem: imagem}, function(response) {
//Exibindo os dados da resposta do servidor
$('#foto1').val( 'http://audiosonic.com.br/novo/documento/' + response.photo + '.jpg' );
// Definindo porcentagem
var porcentagem = (imagem_atual + 1) / imagens.length * 100;
// Atualizando barra de progresso
$('#progresso').text(Math.round(porcentagem) + '%').attr('aria-valuenow', porcentagem).css('width', porcentagem + '%');
// Aplica delay de 1 segundo
// Apenas para evitar sobrecarga de requisições
// e ficar visualmente melhor o progresso
setTimeout(function () {
// Passa para a próxima imagem
imagem_atual++;
redimensionar();
}, 1000);
}, 'json');//O parâmetro JSON informa ao Jquery para tratar a resposta como um JSON
});
}
/*
Limpa os arquivos selecionados
*/
function limpar()
{
var input = $("#imagem");
input.replaceWith(input.val('').clone(true));
}
</script>
<div class="container" style="margin-top:2%;">
<form method="post" action="#" role="form">
<div class="progress">
<div id="progresso" class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
</div>
<div class="form-group row">
<div class="col-xs-12">
<input id="imagem" type="file" accept="image/*" multiple />
</div>
</div>
</form>
<div class="form-group">
<div class="col-md-12">
<input id="foto1" name="foto1" type="hidden" class="form-control input-md">
</div>
</div>