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>