Send form data after image preview

0

I know there are several topics 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 forms fields for the user to fill out, cool, work and show me a preview of the image, however, I can not after that 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><scriptsrc="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>

    
asked by anonymous 20.04.2016 / 02:45

1 answer

0

You are overwriting, in the string html , the definition of the <form> tag. 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 in this line:

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

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

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

One tip: When you're working with dynamic content, it's a good thing to use Inspect Element , when there's a problem, because through it you can check if the content was generated correctly. p>     

20.04.2016 / 09:46