我正在尝试使用简单的 HTML 表单和 PHP 将图像（用户的个人资料图片）上传到我的服务器。
HTML
<?php include("../../header_init.php"); ?>
<div class="PageContainer">
<div class="PageTitle">Profile Initialization - Step 3 of 4</div>
<div id="InitStepDisplay_Stretched">
<p><span class="BigText">Display Image</span></p>
<br />
<div id="PictureDisplayInit"></div>
<div id="Image_Upload_Instructions">
<form id="imageform" method="post" enctype="multipart/form-data" action="../../UploadImage.php" target="ResponseArea" >
<table>
<tr>
<td><span class="SmallText">The photo must be less than 2MB in size and of formats JPEG, PNG, GIF or BMP.</span></td>
</tr>
<tr>
<td><input class="FileInput" type="file" name='file' id="file" accept="image/*" /></td>
</tr>
<tr>
<td><input class="Button" type="submit" name="submit" value="Upload"></td>
</tr>
</table>
</form>
<iframe name="ResponseArea"></iframe>
</div>
</div><!-- End of InitStepDisplay_Stretched -->
</div><!-- End of div PageContainer -->
PHP
if ($_FILES['file']['size'] > 0)
{
$filename = basename($_FILES['file']['name']);
$size = $_FILES['file']['size'];
$valid_formats = array("jpg", "png", "gif", "bmp", "jpeg","GIF","JPG","BMP","PNG");
list($txt,$ext) = explode(".",$filename);
if (in_array($ext, $valid_formats))
{
if ($size < 2098888)
{
// TO DO: Remove any older profile picture
$clean_name = str_replace(" ", "_", $txt)."_".time().".".$ext;
$query = "UPDATE tblSomething SET MyPicture = '" . $clean_name . "' WHERE CurrentUserID = " . $_SESSION['CurrUserID'];
$update_tblSomething = $conn->query($query);
if ($update_tblSomething == true)
{
$newname = 'images/profile/'.$clean_name;
if ($_FILES['file']['error'] == 0 && move_uploaded_file($_FILES['file']['tmp_name'], $newname))
{
$uploaded = $newname;
echo("<img src='../../".$uploaded."' class='PictureDisplayInit Stretch'> <input type='hidden' name='actual_image_name' id='actual_image_name' value='$uploaded' />");
$query = "UPDATE tblAnotherOne
SET Step3Complete = 1, LastUpdated = '" . date("Y-m-d H:i:s") . "' WHERE CurrentUserID = " . $_SESSION['CurrUserID'];
$update_TPC = $conn->query($query);
if ($update_TPC)
{
echo "<br /><br /><br /><br /><br /><span class='SuccessText'>File uploaded successfully. You're almost done.</span><br /><br /><a href='../step4/'>Proceed to final step</a>";
}
else
{
echo "<script>location.href='../../error.php?code=3'</script>";
}
}
else
{
echo "<span class='ErrorTextSmall'>Image could not be uploaded. Please try again.</span>";
}
}
else
{
"<script>location.href='../../error.php?code=3'</script>";
}
}
else
{
echo "<span class='ErrorTextSmall'>File size exceeded 2MB! Please choose a smaller file.</span>";
}
}
else
{
echo "<span class='ErrorTextSmall'>Invalid image file format. Only jpg, png, gif and bmp formats allowed.</span>";
}
}
else
{
$utility->MessageBox("Please select a file to upload.");
}
问题
PHP 代码中的这一部分输出一个“成功声明”，其中包含一个链接（“继续执行最后一步”）。此链接不可点击。
if ($update_TPC)
{
echo "<br /><br /><br /><br /><br /><span class='SuccessText'>File uploaded successfully. You're almost done.</span><br /><br /><a href='../step4/'>Proceed to final step</a>";
}
到目前为止我尝试过的（没有奏效）
- 可以在代码中看到使用的 iframe。
- 在我的 css 文件中，添加了 Z-index: 10; 分别与类 .SuccessText 和包含的 div (#Image_Upload_Instructions)
这是最奇怪的部分（聪明人的线索）
当我在处理文件并显示成功消息后查看页面源时，我在 iframe 中看不到成功消息。
请帮忙！我已经在这里住了两个晚上，没有运气。
这是供您参考的CSS：
#InitStepDisplay_Stretched {
position: relative;
width: 700px;
min-height: 400px;
overflow: auto;
margin-left: auto;
margin-right: auto;
margin-top: 70px;
margin-bottom: 10px;
padding: 50px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #CFCFCF;
background-color: #FFFFEF;
}
#InitStepDisplay_Stretched td {
padding-right: 10px;
padding-bottom: 10px;
vertical-align: top;
line-height: 1.5;
}
#Image_Upload_Instructions {
position: fixed;
top: 280px;
left: 290px;
height: 700px;
width: 440px;
z-index: 10;
}
#InitStepDisplay_Stretched a {
background-color: #3F8FCA;
color: #FFFFFF;
padding: 5px;
text-decoration: none;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
#InitStepDisplay_Stretched a:visited {
background-color: #3F8FCA;
color: #FFFFFF;
}
#InitStepDisplay_Stretched a:hover {
background-color: #3F74BF;
color: #DEEFEA;
}
#InitStepDisplay_Stretched a:active {
background-color: #3F8FCA;
color: #FFFFFF;
}
#InitStepDisplay_Stretched ul {
list-style: circle;
margin-left: 15px;
}
.PictureDisplayInit {
position: relative;
top: 20px;
left: 470px;
width: 200px;
height: 200px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 2px dashed #CFCFCF;
background-repeat: no-repeat;
}
.Stretch { max-width:200px; max-height:200px; width:auto; height:auto; }
.FileInput {
padding: 10px 5px;
width: 440px;
border: 1px solid #CFCFCF;
}