fazer upload de arquivo dentro de um formulário html
Desejo criar um formulário para enviar um produto com recursos para fazer upload de imagens dentro do formulário.
minhas dificuldades são:
Acho difícil fazer upload de arquivos sem perder dados que já são preenchidos pelo usuário no formulário.Quero que o usuário faça o upload do arquivo primeiro e depois pressione o botão EnviarEsta é a sequência que eu quero alcançar:
usuário abra addProduct.php-> então o usuário preenche o formulário -> o usuário carrega a imagem -> finalmente o usuário pressiona o botão enviar para salvar seus dados
esta é a minha página de formulário
<?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">×</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>nota: como você pode ver, eu tinha formulário dentro de um formulário
o que eu quero alcançar foiesta