Send form data after image preview

Question

I know there are several topics about this in the forum, but none of them answered my question, I have the following code that makes a preview of the selected image and some more form fields for the user to fill,cool, works and shows me a preview of the image, however, after that I cannot send the result of the forms to the server, if anyone can help I thank you...

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>

Answer 1

You are overwriting, in the string html, the definition of tag <form>. And without form a post does not occur.

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>';

More precisely on this line:

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

The content defined in this line is not the first text added to the string, so it should be concatenated. It should look like this:

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

A tip: when you’re working with dynamic content, it’s good to use the Inspect Element, when there is any problem, because through it it is possible to verify that the content was generated in the correct way.