How to display path to image on html page

PHP
1

What can be added to this basic image uploader code:

<label for="file">Filename:</label>
<input type="file" name="file" id="file">

so that the image file name that’s chosen to be uploaded is displayed on the html page
with the path /upload/ added to the beginning of the display file name like so:
…/upload/test.png
Any help will be appreciated.

2

What PHP code do you currently have for processing the uploaded image?

3 
	if ($form_submitted == 'yes') {
$allowedExts = array("gif", "jpeg", "jpg", "png");
$temp = explode(".", $_FILES["file"]["name"]);
$extension = strtolower( end($temp) );
if (  $_FILES["file"]["size"] < 200000
      && in_array($extension, $allowedExts) )
{
    if ($_FILES["file"]["error"]!= 0)
    {
        echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
    } else {
        $length = 20;
        move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename );
        $file_location = '<a href="../upload/' . $newfilename . '">' . $newfilename . '</a>';
    }
} else {
  echo "Invalid upload file";
}
$description = $description . " \n " . $newfilename;
}
4

Assuming the $description field is being echoed to the page to display the filename you’d just need to change it to:

$description = $description . "\n ../upload/" . $newfilename;
5

Thanks for your reply.
I don’t need the description to be echoed to the page.
How can I change that? Also, I don’t see the path being displayed when the file is chosen.
After I choose the image, I simply see the name of the chosen file.

  • see attached image example.
    Here’s the code I created, any help/improvements will be appreciated
    <html>
     <head>
      <title>PHP Test</title>
     </head>
      <body>
     <?php
     if ($form_submitted == 'yes') {
     $allowedExts = array("gif", "jpeg", "jpg", "png");
     $temp = explode(".", $_FILES["file"]["name"]);
     $extension = strtolower( end($temp) );
     if (  $_FILES["file"]["size"] < 200000
           && in_array($extension, $allowedExts) )
     {
         if ($_FILES["file"]["error"]!= 0)
         {
             echo "Return Code: " . $_FILES["file"]["error"] . "<br>";
         } else {
             $length = 20;
             move_uploaded_file($_FILES["file"]["tmp_name"], "upload/" . $newfilename );
             $file_location = '<a href="http://www.--.com/upload/' . $newfilename . '">' . $newfilename . '</a>';
         }
     } else {
       echo "Invalid upload file";
     }
     $description = $description . "\n http://www.--.com/upload/" . $newfilename;
     }
    ?>
    <label for="file">Filename:</label>
    <input type="file" name="file" id="file">
    </body>
    </html>

<img src="/community/uploads/default/18614/14bc34e271268c71.png" width="221" height="33">
6

What the file input displays is entirely browser dependent. The only way to get that to display what you want instead of whatever the browser chooses to display is to overlay your own display on top of the file input so that people see your content rather than the browser’s file input. You have to ensure that what you overlay doesn’t interfere with the user being able to interact with the now invisible file input that is behind your content.

Adding the overlay is best done using JavaScript as only with JavaScript are you able to display the filename after the user enters it.

See http://www.felgall.com/csfrm08.htm for the code I came up with that ensures that ALL browsers with JavaScript enabled will display the File input the way Chrome does. You’d simply change the last slice statement to make it display what you want.