How to retrieve the name of the file's name from the server using javascript?

Question

I have a function below where when the file stops uploading, it displays a message whether upload was successful or not and then more importantly displays the name of the file uploaded using this code below:

 $('.listImage').append(nameimagefile + '<br/>');

This code above retrieves the name of the file selected from the file input. The problem with this though is that I don't want the name of the file entered in the file input. Instead I want the name of the file which is uploaded into the server.

For example if I have uploaded 2 files which are both tulips.png, in the server they are saved and uploaded as tulips.png and tulips2.png but because I am using $('.listImage').append(nameimagefile + '<br/>');, it displays both file names as 'tulips.png' which is not what I want.

So this is where I decided i want to retireve the name of the file not from the value of the input file but the name saved when uploaded in the file.

How can I code this in the javascript function?

The javascript function and php script are on seperate pages but I do use a call back function in the php script to the javascript function:

Below is the form code:

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='stopImageUpload(this);' class='imageuploadform' >
    <p>Image File: <input name='fileImage' type='file' class='fileImage' />
    <input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' />
    </p> 
    <ul class='list'></ul>
    </form>

Below is the javascript function which gets the name of the file and displays a message if file is successful or not:

   function stopImageUpload(success){

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

 return true;

}

Finally below is the php script with the javascript call back function. aLl it does is upload file if file exists or not in server's folder. If it exists then it gives it a different file name by adding a name at end of file name, if it doesn't exist then it uploads file with same name:

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>

Hopefully that is all the info you need and thank you.

If there is a php way which you think is better than javascript way of retrieving the name of the file and being able to put it in the javascript function then I am open to those ideas as well :) — user1324106
– user1324106, Commented Apr 18, 2012 at 6:48

d4rkpr1nc3 · Accepted Answer · 2012-04-18 06:51:24Z

1

You could pass $_FILES["fileImage"]["name"] as argument to your js function. Javascript is a client side language, and thus, unable to handle files on the server.

answered Apr 18, 2012 at 6:51

d4rkpr1nc3

1,82713 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1324106 Over a year ago

Hi, how can I pass $_FILES["fileImage"]["name"] as argument to the js function? Like I said the php script is on a separate page to the javascript function

d4rkpr1nc3 Over a year ago

In the php script, after you finished uploading, set a $_SESSION variable containing the name of the uploaded file. I've edited your code.

Collectives™ on Stack Overflow

How to retrieve the name of the file's name from the server using javascript?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related