Question

I am trying to retrieve a file name from one page where the php script uploads the file (imageupload.php), and I want to display it in another page within a javascript function (QandATable.php). But I don’t know how to do this

I will show you all of the relevant code so you can follow it and so you are able to understand what is happening.

UPDATE: BELOW I WILL SHOW YOU THE STEPS ON HOW THE FILE IS UPLOADED. THE CODE BELOW SUCCESSFULLY UPLOADS THE FILE.

Below is the form (QandATable.php);

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
<label>Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><label class='imagelbl'>" + 
"<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" + 
"</p><ul class='listImage' align='left'></ul>" +
"<iframe class='upload_target' name='upload_target' src='#' style='width:0;height:0;border:0px;solid;#fff;'></iframe></form>"); 

On the same page when the user submits the form, it will go onto the function below, it will check for validation and then when validation is clear, it will go onto the startImageUpload() function:

 function imageClickHandler(imageuploadform){ 
      if(imageValidation(imageuploadform)){ 
          return startImageUpload(imageuploadform); 
      } 
      return false;
  }

If there is no validation then it will go onto the JS function (QandATable.php) below where it hides the file input and it will submit the form to the imageupload.php where the file uploading occurs. When the file is uploaded it then calls back to the stopImageUpload() function (QandAtable.php) where it will display the message on whether the file is uploaded or not and this is where I want the name of the file from the server to be appended.

Below is startImageUpload() function:

var sourceImageForm;

function startImageUpload(imageuploadform){

$(imageuploadform).find('.fileImage').css('visibility','hidden');
sourceImageForm = imageuploadform;

return true;
        }

Below is the php script where it uploads the file (imageupload.php):

    <?php

    session_start();

    $result = 0;

    if( file_exists("ImageFiles/".$_FILES['fileImage']['name'])) {
        $parts = explode(".",$_FILES['fileImage']['name']);
        $ext = array_pop($parts);
        $base = implode(".",$parts);
        $n = 2;

        while( file_exists("ImageFiles/".$base."_".$n.".".$ext)) $n++;
        $_FILES['fileImage']['name'] = $base."_".$n.".".$ext;

        move_uploaded_file($_FILES["fileImage"]["tmp_name"],
        "ImageFiles/" . $_FILES["fileImage"]["name"]);
        $result = 1;

    }
        else
          {
          move_uploaded_file($_FILES["fileImage"]["tmp_name"],
          "ImageFiles/" . $_FILES["fileImage"]["name"]);
          $result = 1;     

          }

    ?>

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

Finally when upload is finished it goes back to the stopUploadImage() function (QandATable.php) to display the message on whether file is successfully uploaded or not. This is also where I want the uploaded file name from the server to be appended.

   function stopImageUpload(success){

          var result = '';
          if (success == 1){
result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';
             $('.listImage').append('<br/>');
          }
          else {
result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
          }

    return true;

    }

Answer 1

Your $_POST won’t contain fileimagename. Instead, your form input was called fileImage. Use that instead:

// Check $_POST for fileImage, which was the form input name
if (isset($_POST['fileImage'])) {
  $_SESSION['fileimagename'] =  $_FILES['fileImage']['name'];
  // Proceed with the file upload and save.
}
else {
 // oops, can't proceed
}

On the JavaScript page, do some error checking when accessing the value:

<?php
session_start();
if (isset($_SESSION['fileimagename'])) {
  $fileimagename = $_SESSION['fileimagename'];
  // output JS code...
?>
 <script type="text/javascript">Your JS code here...</script>
<?php
}
else {
  // No filename - can't proceed with JavaScript code
  // Display an eror or a message with instructions for user...
}

Note: Don’t use the user-supplied filename to store the image! It opens you up to a directory traversal attack, and makes it possible for the user to write a file anywhere on your filesystem the web server has write-access to.

// This is unsafe!
move_uploaded_file($_FILES["fileImage"]["tmp_name"], "ImageFiles/" . $_FILES["fileImage"]["name"]);

Instead, it’s common to store the value from $_FILES['fileImage']['name'] in your database, along with an identifier value for the actual file, and use the identifier to store it on disk.

$info = pathinfo($_FILES['fileImage']['name']);
// Get the original extension
$filext = $info['extension'];
// Make a unique filename and add the extension
$stored_filename = uniqid() . $filext;

// Use that to store the file on disk
move_uploaded_file($_FILES["fileImage"]["tmp_name"], $stored_filename);

// Now store BOTH $_FILES['fileImage']['name'] and $stored_filename in your database together
// The original user-supplied filename can be used for display, but isn't used on disk