загрузить файл внутри формы html

Я хочу создать форму для отправки продукта, который имеет функции для загрузки изображений внутри формы.

мои трудности:

Мне сложно загружать файлы, не теряя данные, которые уже заполняются пользователем в форме.
Я хочу, чтобы пользователь сначала загрузил файл, затем пользователь нажал кнопку отправки

это последовательность, которую я хочу достичь:

user open addProduct.php-> затем пользователь заполнит форму -> изображение для загрузки пользователя -> наконец, нажмите кнопку отправки, чтобы сохранить свои данные

это моя страница формы

<?php require_once './model/functions.php'; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="center-block" style="width: 130px;"> <h3><strong>Add Book</strong></h3> </div> </div> <form id="productform" method="post" action="test_add_product.php" class="form-horizontal"> <div class="form-group"> <label for="kategori" class="col-lg-4 control-label">Kategori : </label> <div class="col-lg-2"> <input type="hidden" class="form-control" id="main-sub-pages-id" name="category-id"> <div class="input-group"> <input type="text" class="form-control" id="main-sub-pages"> <span class="input-group-btn"> <button type="button" class="btn btn-default" data-toggle="modal" data-target=".category-modal"><span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span></button> </span> </div> <div class="modal fade category-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">Category</h4> </div> <div class="modal-body"> <div class="container"> <div class="row"> <div class="col-lg-4"> <div class="text-center"> <h4>Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"> <h4>Sub Pages</h4> </div> </div> <div class="col-lg-4"> <div class="text-center"></div> <h4></h4> </div> </div> <div class="row"> <div class="col-lg-4"> <select id="pages" name="pages" class="form-control" size="6" onchange="loadCategory('pages','sub-pages')"> <?php $subjects_set = find_all_subjects(); while($subject = mysqli_fetch_assoc($subjects_set)){ ?> <option value="<?php echo $subject["id"];?>"><?php echo $subject["name"]; ?></option> <?php } ?> </select> </div> <div class="col-lg-4"> <select id="sub-pages" name="pages" class="form-control" size="6"> </select> </div> <div class="col-lg-4"> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="saveCategory()">Save changes</button> </div> </div> </div> </div> </div> </div> <div class="form-group"> <label for="tipeIklan" class="col-lg-4 control-label">Tipe Iklan : </label> <div class="col-lg-6"> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=0>Dicari </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=1 checked="checked">Dijual </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=2>Disewakan </label> <label class="radio-inline"> <input type="radio" name="tipeIklan" id="tipeIklan" value=3>Jasa </label> </div> </div> <div class="form-group"> <label for="judul" class="col-lg-4 control-label">Judul : </label> <div class="col-lg-6"> <input type="text" class="form-control" id="judul" name="judul" placeholder="Judul iklan anda"> </div> </div> <div class="form-group"> <label for="deskripsi" class="col-lg-4 control-label">Deskripsi : </label> <div class="col-lg-6"> <textarea id="deskripsi" class="form-control" rows="5" name="description"></textarea> </div> </div> <div class="form-group"> <label for="harga" class="col-lg-4 control-label">Harga(Rp.) : </label> <div class="col-lg-3"> <input type="text" class="form-control" id="harga" name="harga" aria-describedby="helpBlock" placeholder="cukup tuliskan angka" onfocus="toolTipHarga()"> </div> </div> <div class="form-group"> <label for="kondisi" class="col-lg-4 control-label">Kondisi : </label> <div class="col-lg-6"> <label class="radio-inline"> <input type="radio" name="kondisi" id="kondisi" value=0>Bekas </label> <label class="radio-inline"> <input type="radio" name="kondisi" id="kondisi" value=1 checked="checked">Baru </label> </div> </div> <div class="form-group"> <label for="provinsi" class="col-lg-4 control-label">Provinsi : </label> <div class="col-lg-3"> <select id="provinsi" name="provinsi" class="form-control" onchange="loadLocation('provinsi', 'kota')"> <option>Select one</option> <?php $provinsi_set = find_all_province(); while($provinsi = mysqli_fetch_assoc($provinsi_set)){ ?> <option value="<?php echo $provinsi["id"];?>"><?php echo $provinsi["nama"]; ?></option> <?php } ?> </select> </div> </div> <div class="form-group"> <label for="kota" class="col-lg-4 control-label">Kota : </label> <div class="col-lg-3"> <select id="kota" name="kota" class="form-control"> </select> </div> </div> <div class="form-group"> <label for="foto" class="col-lg-4 control-label">Upload Foto : </label> <div class="col-lg-6"> <div class="row"> <?php //scan "uploads" folder and display them accordingly $folder = "uploads"; $results = scandir('uploads'); foreach ($results as $result) { if ($result === '.' or $result === '..') continue; if (is_file($folder . '/' . $result)) { echo ' <div class="col-md-3"> <div class="thumbnail"> <img src="'.$folder . '/' . $result.'" alt="..."> <div class="caption"> <p><a href="remove.php?name='.$result.'" class="btn btn-danger btn-xs" role="button">Remove</a></p> </div> </div> </div>'; } } ?> </div> <div class="row"> <form class="well" action="upload.php" method="post" enctype="multipart/form-data"> <div class="form-group"> <label for="file">Select a file to upload</label> <input type="file" name="file"> <p class="help-block">Only jpg,jpeg,png and gif file with maximum size of 1 MB is allowed.</p> </div> <input type="submit" class="btn btn-lg btn-primary" value="Upload"> </form> </div> </div> </div> <div class="col-lg-offset-4"> <button type="submit" id="registrationbutton" class="btn btn-default">Tayangkan!</button> </div> </form> </div> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> <script type="text/javascript"> $("#registrationbutton").click(function(){ if(!validateText("main-sub-pages")) { return false; } if(!validateText("judul")) { return false; } if(!validateText("deskripsi")) { return false; } if(!validateText("harga")) { return false; } if(!validateNumber("harga")) { } if(!validateText("provinsi")) { return false; } if(!validateText("kota")) { return false; } $("form#productform").submit(); }); </script> <?php close_connection(); ?> </body> </html>

примечание: как вы можете видеть, у меня была форма внутри формы

чего я хочу достичь, это

При работе с загрузкой данных, скажем, изображения. вы должны добавить форму enctype, как предложили другие.

 <form id="productform" method="post" enctype="multipart/form-data" action="test_add_product.php" class="form-horizontal"> ............. </form>

Вот сценарий загрузчика Javascript:

 <script> var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("file").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("imgTampil").src = oFREvent.target.result; }; </script> <img id="imgTampil" alt="" src="" class="img-responsive"/> <input id="file" type="file" name="file" onchange="displ_img();" class="btn btn-default" /> <script> function displ_img() { //to display the image var oFReader = new FileReader(); oFReader.readAsDataURL(document.getElementById("file").files[0]); oFReader.onload = function (oFREvent) { document.getElementById("imgTampil").src = oFREvent.target.result; }; }; </script>

Поместите сценарий, где бы вы ни пожелали, например, над кнопкой отправки.

ОБНОВЛЕНО: коды для загрузки изображения в PHP (например,):

 $uploadpath='../usrphoto/'; //image path $allowtype=array('gif','jpg','png'); $allowsize=71250; if(isset($_FILES['file']) && strlen($_FILES['file']['name']) > 1){ $uploadpath=$uploadpath . basename( $_FILES['file']['name']); $sepext=explode('.', strtolower($_FILES['file']['name'])); $type=end($sepext); if(!in_array($type, $allowtype)){ echo "<script>alert('Format file tidak valid! (format:gif,jpg &amp; png)');</script>"; header("Location: http://www.mywebsite.com/"); } elseif ($allowsize>71250){ echo "<script>alert('Ukuran photo anda terlalu besar! (maks.41 Kilobytes)');</script>"; header("Location: http://www.mywebsite.com/"); } else{ if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadpath)){ echo 'successfully uploaded!'; else{ header("Location: http://www.mywebsite.com/"); } } }

 <form enctype="multipart/form-data" just add an attribute 'enctype="multipart/form-data"' into your form attribute.

Просто добавьте этот атрибут типа enctype в свою форму, он не потеряет качество загруженных данных

 <form enctype="multipart/form-data">

используйте технологию загрузки swfupload .. она загружает данные во время просмотра и возвращает имя загруженного файла. После этого, когда пользователь нажимает кнопку «Отправить», сохраните это имя файла с другими полями формы в базе данных.