Question

这是我第一次尝试这样做，所以我必须承认我不知道从哪里开始。

我为用户创建了一个表单，用于输入有关自己的一些基本信息和照片。

此数据会在保存为“directory.html”的页面上创建一个小的个人资料条目。

通过使用以下两个页面......'Form.html'和'Upload.php'，我能够成功创建'directory.html'页面的输出，以及该页面上的单个条目。

但是，当另一个用户尝试使用该表单创建他们的'directory.html'条目时，它会覆盖第一个用户的条目。

因此，我一次只能在页面上生成一个条目。

显然......这对我不起作用。

我需要能够使用此过程在（垂直）列表中的'directory.html'页面上创建多个条目（包括所有CSS样式等）。

除了我迄今为止所尝试的内容之外，我没有任何线索可以做到这一点。

所以任何帮助都会非常感激。

注意：我会在这个项目的后期阶段做一个正确的'数据库'系统，但是现在，我想用html来完成这个部分。

以下是两个页面的代码......

表格（Form.html）

<!DOCTYPE html>
<html>
<head>

<style>
body{margin-top:60px; font-family:Arial, Helvetica, sans-serif; font-size:12pt;}
.formContainer{width:300px; margin:0 auto;}
.label{margin-top:10px;}
.notes{font-size:11px; font-style:italic;}
.field{margin-top:10px;}
.fieldForm{width:100%; height:22px;}
.btn{margin-top:20px;}
.divider{margin-top:10px; width:100%; height:1px; background-color:#828282;}
</style>

</head>
<body>

<div class="formContainer">
<h1>PROFILE FORM</h1>
<form action="Upload.php" method="post" enctype="multipart/form-data">
<div class="label">FULL NAME</div>
<input class="fieldForm" name="name" autocomplete="off">
<div class="divider"></div>
<div class="label">EMAIL ADDRESS</div>
<input class="fieldForm" name="email" autocomplete="off">
<div class="divider"></div>
<div class="label">CONTACT PHONE</div>
<input class="fieldForm" name="phone" autocomplete="off">
<div class="divider"></div>
<div class="label">COMPANY</div>
<input class="fieldForm" name="company" autocomplete="off">
<div class="divider"></div>
<div class="label">POSITION</div>
<input class="fieldForm" name="position" autocomplete="off">
<div class="divider"></div>
<div class="label">PROFILE PIC<br>
<span class="notes">* Images must have a width of 300px or greater.</span>
</div>
<input class="field" type="file" name="userImage" id="userImage">
<div class="divider"></div>
<input class="btn" name="submit" type="submit" value="SUBMIT">
</form>
</div>

</body>
</html>

PHP（Upload.php）

<?php ob_start();?> 

<!DOCTYPE html>
<html>
<head>

<meta name="" content="text/html; charset=utf-8, width=device-width, initial-scale=1, minimum-scale=1" http-equiv="Content-Type" />

<style>
.fixed-ratio-resize{max-width:100%; height:auto; width:auto\9;}
body{margin-top:10px; margin-left:20px; font-family:Arial, Helvetica, sans-serif; font-size:12pt; }
.container{clear:both; float:left; margin-top:10px; max-width:300px; height:auto; }
.content{float:left; width:100%; height:auto;}
.image{float:left; max-width:300px; height:auto;}
.infoWrapper{clear:both; float:left; width:100%; margin-top:-4px;}/*TRBL*/
.name{margin-top:6px; font-weight:bold;}
.company{margin-top:6px; font-weight:bold;}
.email{margin-top:6px;}
.phone{margin-top:6px; margin-bottom:6px;}
.divider{float:left; margin-top:10px; margin-bottom:10px; width:100%; height:1px; background-color:#828282;}
</style>

</head>
<body>

<!--Start Container & Content-->
<div class="container">
<div class="content">

<!--Start Profile Image-->
<div class="image">
<?php
$target_dir    = "imageFolder/";
$target_file   = $target_dir . basename($_FILES["userImage"]["name"]);
$uploadOk      = 1;
$imageFileType = pathinfo($target_file, PATHINFO_EXTENSION);
if (isset($_POST["submit"])) {
$check = getimagesize($_FILES["userImage"]["tmp_name"]);
if ($check !== false) {
    echo "" . $check[""] . "";
    $uploadOk = 1;
} else {
    echo "  &#xd7; FILE IS NOT AN IMAGE";
    $uploadOk = 0;
}
}
if (file_exists($target_file)) {
echo "  &#xd7; THIS IMAGE ALREADY EXIST ON SERVER";
$uploadOk = 0;
}
if ($_FILES["userImage"]["size"] > 500000) {
echo "  &#xd7; FILE IS TOO LARGE";
$uploadOk = 0;
}
if ($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg" && $imageFileType != "gif") {
echo "  &#xd7; ONLY JPG, JPEG, PNG & GIF FILES ARE PERMITTED";
$uploadOk = 0;
}
if ($uploadOk == 0) {
echo "  &#xd7; IMAGE WAS NOT UPLOADED";
} else {
if (move_uploaded_file($_FILES["userImage"]["tmp_name"], $target_file)) {
echo '<img class="fixed-ratio-resize" src="imageFolder/' . basename($_FILES["userImage"]["name"]) . '">';
} else {
    echo "  &#xd7; IMAGE WAS NOT UPLOADED";
}
}
?>
</div>
<!--End Profile Image-->

<!--Start Posting Info-->
<div class="infoWrapper">
<div class="name"><?php $name = htmlspecialchars($_POST['name']); echo  $name;?></div>
<div class="position"><?php $position = htmlspecialchars($_POST['position']); echo  $position;?></div>
<div class="company"><?php $company = htmlspecialchars($_POST['company']); echo  $company;?></div>
<div class="email"><?php $email = htmlspecialchars($_POST['email']); echo  $email;?></div>
<div class="phone"><?php $phone = htmlspecialchars($_POST['phone']); echo  $phone;?><br></div>
</div>
<!--End Posting Info-->

</div><!--End Content-->

<div class="divider"></div>

</div>
<!--End Container-->

</body>
</html>

<?php echo ''; file_put_contents("directory.html", ob_get_contents()); ?>

Answer 1

Ok @jamie，基于PHP文档file_put_contents覆盖了现有文件。因此，如果您需要在文件末尾添加值，则应使用FILE_APPEND标志在文件末尾附加一个条目。

喜欢：file_put_contents($file, $data, FILE_APPEND);

使用PHP表单

1 个答案: