upload Datei in einem Formular HTML
Ich möchte ein Formular erstellen, um ein Produkt mit Funktionen zum Hochladen von Bildern in das Formular einzureichen.
meine Schwierigkeiten sind:
Ich finde es schwierig, Dateien hochzuladen, ohne dass Daten verloren gehen, die der Benutzer bereits im Formular ausgefüllt hat.Ich möchte, dass der Benutzer zuerst die Datei hochlädt und dann den Senden-Button drückt.dies ist die Reihenfolge, die ich erreichen möchte:
user open addProduct.php-> dann füllt der Benutzer das Formular aus -> der Benutzer lädt ein Bild hoch -> abschließend drückt der Benutzer die Submit-Taste, um seine Daten zu speichern
dies ist meine Formularseite
<?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>note: Wie Sie sehen können, hatte ich Form innerhalb eines Formulars
was ich erreichen will warDie