PHP和JS - 上傳圖片不顯示

（我有一天到PHP，所以請原諒，如果這是重複）我有代碼上傳圖片到我的上傳/目錄在網站文件夾。這是通過下面給出的index.html和upload.php完成的，最初見於PHP - Upload picture and display on page。PHP和JS - 上傳圖片不顯示

但是，我不能根據需要在html頁面上顯示圖片。它重定向到upload.php，沒有圖像處理器。任何幫助如何做到這一點？我的index.html工作正常，所以我猜我的PHP設置應該沒問題。我跟着this，this和this來安裝和設置一切。

的index.html

<!DOCTYPE html> 
<html> 
<head> 
<script language= "javascript" type="text/javascript"> 
function juploadstop(result){ 
    console.log(typeof result); 
    if(result==0){ 
     $(".imageholder").html(""); 
    } 
    else if(result!=0){ 
     $(".imageholder").html("<img src='"+result+"'>"); 
    } 
} 
</script> 
</head> 

<body> 
<form action="upload.php" method="post" enctype="multipart/form-data"> 
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished --> 
    </div> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 
</body> 
</html>

和upload.php的

<?php 
$target_dir = "uploads/"; 
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]); 
$result = $target_file; 
$uploadOk = 1; 
$imageFileType = pathinfo($target_file,PATHINFO_EXTENSION); 

// Check if image file is a actual image or fake image 
if(isset($_POST["submit"])) { 
    $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]); 
    if($check !== false) { 
     $uploadOk = 1; 
    } else { 
     $uploadOk = 0; 
    } 
} 

if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg") { 
    // echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed."; 
    $uploadOk = 0; 
} 


if ($uploadOk == 0) { 
    // echo "Sorry, your file was not uploaded."; 
} else { 
    if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) { 
     $result = $target_file; 
    } else { 
     $result = 0; 
    } 
} 
?> 

<script language="javascript" type="text/javascript"> 
    window.top.window.juploadstop(<?php echo $result; ?>); 
</script>

編輯1我加入

header("Location: index.html");

到端我的php代碼在php部分完成之前，它不再重定向。但是，圖像仍然不顯示。

來源

2017-07-25 Bhavna

你可以使用java腳本來做到這一點，但沒有必要這樣做。最簡單的方法是用幾行PHP。將您的文件的名稱從index.html更改爲index.php因此您可以在該文件中使用PHP。

<br> 
HERE ARE YOUR UPLOADED IMAGES: 
<br> 
<?php 
$dirname = "uploads/"; 

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE); 

foreach($images as $image) { 
    echo '<img src="'.$image.'" /><br />'; 
} 
?> 

<br>

此線將顯示從上傳文件夾中的所有圖像：

在你的index.php文件你關閉你的表格後，添加以下代碼。

所以，你有這樣的事情：

<!DOCTYPE html> 
<html> 
<head> 
<script language= "javascript" type="text/javascript"> 
function juploadstop(result){ 
    console.log(typeof result); 
    if(result==0){ 
     $(".imageholder").html(""); 
    } 
    else if(result!=0){ 
     $(".imageholder").html("<img src='"+result+"'>"); 
    } 
} 
</script> 
</head> 

<body> 
<form action="upload.php" method="post" enctype="multipart/form-data"> 
    <div class="imageholder"> <!-- a gif image to show that the process wasn't finished --> 
    </div> 
    Select image to upload: 
    <input type="file" name="fileToUpload" id="fileToUpload"> 
    <input type="submit" value="Upload Image" name="submit"> 
</form> 
<br> 
HERE ARE YOUR UPLOADED IMAGES: 
<br> 
<?php 
$dirname = "uploads/"; 

$images = glob($dirname."*{jpg,png,gif}", GLOB_BRACE); 

foreach($images as $image) { 
    echo '<img src="'.$image.'" /><br />'; 
} 
?> 

<br> 

</body> 
</html>

您還需要在年底在upload.php的文件中加入：

header('Location: index.php');

之前，請務必添加這個您在那裏關閉PHP標記。此行將始終將您重定向到您的索引頁面。

希望這對你有幫助！

來源

2017-07-25 17:43:22 Darko

在我看來，你正試圖從你的upload.php調用你的「juploadstop」函數，它包含在你的JS中的index.html頁面中。這是行不通的。如果你只是想上傳並顯示圖片，你甚至不一定需要使用任何JS。只需爲目標文件使用固定名稱，刪除JS，在index.html <img src="uploads/yourimage.jpg">中放置一個簡單的圖像標記，然後在您的PHP腳本的末尾放置一個header("Location: index.html");，因此一旦上傳完成，用戶將被定向回到索引頁面。

來源

2017-07-25 15:12:06

非常感謝您的幫助！我想從_upload.php_ 和要上傳的文件調用juploadstop，因此目標文件名取決於用戶。我可以在處理中給它一個固定的名字嗎？如果是，如何？ – Bhavna

PHP和JS - 上傳圖片不顯示

回答

相關問題