Home/ Questions/Q 7876591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T03:11:26+00:00

I have a problem appending the imageNameArray where it is suppose to display file

  • 0

I have a problem appending the imageNameArray where it is suppose to display file names which have been uploaded.

The problem is that lets say I previously uploaded a file (pig.png), when I refresh page and upload another file (panda.png), then when I upload the file, it should display ‘panda.png’. But instead it is appending the name of the previous uploaded file (pig.png) and it does not append panda.png.

If I refresh page again and upload another file (tiger.png), then when I upload the file, it should display ‘tiger.png’. But instead it is still just appending the name of the previously uploaded files (panda.png) and it does not append tiger.png.

If I upload another file (not refreshing page) such as monkey.png, then again it appends panda.png. No monkey.png. So it should of append tiger.png and monkey.png but instead it appends panda.png and panda.png.

All I want is that when a file is uploaded, it’s name is appended. But how can this be achieved? Please show a coded example of how to fix it as I find it easier than an explanation saying why this is happening 🙂

Below is the javascript code where the appending occurs:

    <?php
    session_start();

    $idx = count($_SESSION ['fileImage'] - 1);
    $output = isset($_SESSION ['fileImage'][$idx]) ?
        $_SESSION ['fileImage'][$idx]['name'] : "";

    ?>

<script type="text/javascript">

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

function startImageUpload(imageuploadform){

              $(".imageCancel").click(function() {
              $('.upload_target').get(0).contentwindow
          return stopImageUpload();
    });

      return true;
}

    function stopImageUpload(success){
        var imageNameArray = new Array();
        imageNameArray = <?php echo $output ?>;
        var result = '';

        if (success == 1){
            result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

            for(var i=0;i<imageNameArray.length;i++)
            {
                $('.listImage').append(imageNameArray[i]+ '<br/>');
            }
        }
        else {
            result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
        }
        return true;
    }

</script>

<body>

<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='return imageClickHandler(this);' class='imageuploadform' > 
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>");



</body>

Below is the php script (imageupload.php) where it uploads a file which is on another page from the javascript function above:

<?php
session_start();

$result = 0;
$errors = array ();
$dirImage = "ImageFiles/";

if (isset ( $_FILES ['fileImage'] ) &&
    $_FILES ["fileImage"] ["error"] == UPLOAD_ERR_OK) {

    $fileName = $_FILES ['fileImage'] ['name'];

    $fileExt = pathinfo ( $fileName, PATHINFO_EXTENSION );
    $fileExt = strtolower ( $fileExt );

    $fileDst = $dirImage . DIRECTORY_SEPARATOR . $fileName;

        if (count ( $errors ) == 0) {
            if (move_uploaded_file ( $fileTemp, $fileDst )) {
                $result = 1;
        }
    }
}

$_SESSION ['fileImage'][] = array('name' => $_FILES ['fileImage']['name']);
?>
<script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result;?>);</script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The problem is that you are outputting the name of the uploaded file when the PHP code renders the page, which is before the (next) image is uploaded.

    This happens on this line in the stopImageUpload() JavaScript function:

    imageNameArray = <?php echo $output ?>;

    There are a couple ways you can resolve this, but I would go for the straightforward way of passing the file name back via the stopImageUpload() function.

    // stolen from http://stackoverflow.com/questions/1219860/javascript-jquery-html-encoding
function htmlEncode(value) { return $('<div/>').text(value).html(); }

function stopImageUpload(success, filename) {
  var imageNameArray = new Array();
  var result = '';

  if (success) {
    result = '<span class="msg">The file was uploaded successfully!</span><br/><br/>';

    $('.listImage').append(htmlEncode(filename) + '<br/>');
  } else {
    result = '<span class="emsg">There was an error during file upload!</span><br/><br/>';
  }
}

    Then you simply need to adjust the last line of imageupload.php:

    <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?php echo $result ? 'true' : 'false'; ?>, '<?php echo $_FILES['fileImage']['name'] ?>');</script>

    Note: If you have the option turned on to allow <?= ?> blocks you can make the above code look much nicer:

    <script language="javascript" type="text/javascript">window.top.stopImageUpload(<?= $result ? 'true' : 'false'; ?>, <?= $_FILES['fileImage']['name'] ?>);</script>
    • 0