シンプルな 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 内に成功メッセージが表示されません。
助けてください！私はこれで2泊しましたが、運が悪いです。
参照用の 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;
}