我想创建一个表单来提交一个产品，该产品具有在表单中上传图像的功能。
我的困难是：
这是我想要达到的顺序：
用户打开addProduct.php-＆gt;然后用户填写表格 - ＆gt;用户 上传图片 - ＆gt;最后用户按下提交按钮保存他们的 数据
这是我的表单页面
<?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>
注意：正如您所看到的，我在表单中有表单
我想要实现的目标是this
答案 0 :(得分：1)
使用上传数据时，比如图片。你应该像其他人建议的那样添加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 & 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/");
}
}
}
答案 1 :(得分：0)
<form enctype="multipart/form-data"
just add an attribute 'enctype="multipart/form-data"' into your form attribute.
答案 2 :(得分：0)
只需在表单中添加此enctype类型属性，它就不会失去上传数据的质量
<form enctype="multipart/form-data">
答案 3 :(得分：-1)
使用swfupload上传技术..在浏览时上传数据并返回上传文件的名称。之后用户点击提交时，将该文件名与其他表单字段存储到数据库中。