0

Sei que tem vários tópicos à respeito no fórum, mas nenhum deles respondeu à minha dúvida, eu tenho o seguinte código que faz um preview da imagem selecionada e mais alguns campos de formulários para o usuário preencher,legal, funciona e me mostra um preview da imagem, porém, não consigo depois disso enviar o resultado dos formulários para o servidor, se alguém puder ajudar eu agradeço...

Title Page

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.2/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->




    <script>
        function preview(input) 
        {


            for (i = 0; i < input.files.length; i++) 
            {

                var reader = new FileReader();
                reader.onload = function (e) 
                {

                    if (!document.getElementById('images').getElementsByTagName('img').length) 
                    {
                        document.getElementById('images').innerHTML = '';
                    }    

                    var html =  '<form action="#" method="POST" accept-charset="utf-8" enctype="multipart/form-data">';

                    html  = '   <table class="table table-striped table-hover">';
                    html += '       <tbody>';                                  
                    html += '           <tr>';
                    html += '               <td>';
                    html += '                   <img class="img-thumbnail" alt="Bootstrap Image Preview" src="'+e.target.result+'" name="img" width="115"/>';
                    html += '               </td>';

                    html += '               <td>';
                    html += '                   <div class="form-group">';
                    html += '                       <label for="exampleInputEmail1">';
                    html += '                           Nome';
                    html += '                       </label>';
                    html += '                       <input class="form-control input-sm" id="exampleInputEmail1" type="text" name="nome" value="" />';
                    html += '                   </div>';
                    html += '               </td>';

                    html += '               <td>';
                    html += '                   <div class="form-group">';
                    html += '                       <label for="exampleInputEmail1">';
                    html += '                           Email';
                    html += '                       </label>';
                    html += '                       <input class="form-control input-sm" id="exampleInputEmail1" type="text" name="email" />';
                    html += '                   </div>';
                    html += '               </td>';

                    // html += '            <td>';
                    // html += '                <div class="form-group">';
                    // html += '                    <label for="exampleInputEmail1" >';
                    // html += '                        Status';
                    // html += '                    </label>';
                    // html += '                    <div class="progress">';
                    // html += '                        <div class="progress-bar progress-success"></div>';
                    // html += '                    </div>';
                    // html += '                </div>';
                    // html += '            </td>';

                    html += '               <td>';
                    html += '                   <div class="form-group">';
                    html += '                       <label for="exampleInputEmail1" >';
                    html += '                           Confirmar';
                    html += '                       </label>';
                    html += '                       <input type="submit" class="btn btn-success btn-block" value="UPLOAD" name="upload">';
                    html += '                   </div>';
                    html += '               </td>';

                    html += '               <td>';
                    html += '                   <div class="form-group">';
                    html += '                       <label for="exampleInputEmail1" >';
                    html += '                           Cancelar';
                    html += '                       </label>';
                    html += '                       <input type="submit" class="btn btn-danger btn-block" value="Cancelar">';
                    html += '                   </div>';
                    html += '               </td>';
                    html += '           </tr>';


                    html += '       </tbody>';
                    html += '   </table>';
                    html += '</form>';

                    $('#images').after(html);
                };                  

                // alert(html);                             

                reader.readAsDataURL(input.files[i]);
            }
        }
    </script>


</head>
<body>
    <input type="file" name="files" id="files" onchange="preview(this);" multiple><hr>
    <div id="images">Escolha suas imagens</div>

    <?php
        if($_POST)
        {
            foreach ($_POST as $key => $value) {
                echo $_POST['nome']." ".$_POST['email'];    
            }
        }

    ?>


    <!-- jQuery -->
    <script src="//code.jquery.com/jquery.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="Hello World"></script>
</body>

1
  • "não consigo depois disso enviar o resultado dos formulários para o servidor" o que é que já testaste? Queres enviar com ajax ou via <form action?
    – Sergio
    Commented 20/04/2016 às 5:17

1 Resposta 1

0

Você está sobrescrevendo, na string html, a definição da tag <form>. E sem formulário um post não ocorre.

var html =  '<form action="#" method="POST" accept-charset="utf-8" enctype="multipart/form-data">';
                html = '   <table class="table table-striped table-hover">';
                html += '       <tbody>';                                  
                html += '           <tr>';

Mais precisamente nesta linha:

                html = '   <table class="table table-striped table-hover">';

O conteúdo definido nesta linha, não é o primeiro texto adicionado na string, por isso, ele deve ser concatenado. Deve ficar desta forma:

                html += '   <table class="table table-striped table-hover">';

Uma dica: quando você estiver trabalhando com conteúdo dinâmico, é bom utilizar o Inspect Element, quando houver algum problema, pois através dele é possível verificar se o conteúdo foi gerado da forma correta.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .