Run automatic Javascript event, with data from an iframe

Asked

Viewed 493 times

0

In a form, for sending a photo, I use an iframe. This is responsible for uploading the photo and sending it to the Server folder. When I hover over an input on my other page (onMouseOver), I get the file path, since I have an input on 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, without any onMouseOver, onClick events... I would like to leave this "Hidden" field, so that the person does not have access to the Server image folder.

Development page: http://www.audiosonic.com.br/novo/cursos2205.html All this is in the "students' enrollment part".

Excerpt from the code:

<!-- 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 idea?

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>
<script src="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>

  • For this we need the code of your upload, it is only in the answer Voce return the value and apply it using jQuery or JS same.

  • I put it in the question above, friend!

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.