Question

Below I have a file input and 2 javascript functions which control the start and stop of the file uploads.

FILE INPUT:

var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" +
    "<p class='imagef1_upload_form'><label>" +
    "Image File: <input name='fileImage' type='file' class='fileImage' /></label><br/><br/><label class='imagelbl'>" +
    "<input type='submit' name='submitImageBtn' class='sbtnimage' value='Upload' /></label>" +
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "<p class='imagef1_upload_process'>Loading...<br/><img src='Images/loader.gif' /></p>" +
    "<input type='hidden' class='numimage' name='numimage' value='" + GetFormImageCount() + "' />" +
    "</p><p class='imagef1_cancel' align='center'><label>" +
    "<input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
    "</p><p class='imagemsg'></p><p class='listImage'></p>" +
    "<iframe class='upload_target_image' name='upload_target_image' src='/' style='width:0px;height:0px;border:0px;solid;#fff;'></iframe></form>");

START UPLOADING FUNCTION:

    var sourceImageForm;

    function htmlEncode(value) { return $('<div/>').text(value).html(); }


function startImageUpload(imageuploadform){

  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  $(imageuploadform).find('.imagemsg').css('visibility','hidden');
  sourceImageForm = imageuploadform;


      return true;
}

STOP UPLOAD FUNCTION:

function stopImageUpload(success, imageID, imagefilename){

      var result = '';
      imagecounter++;

      if (success == 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span>';   
            $('.listImage').eq(window.lastUploadImageIndex).append('<input type="hidden" name="imgid[]" id="'+imageID+'" value="' + imageID + '" />');
            $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" data-imageID="'+imageID+'"  data-image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
         }


      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagemsg').html(result);
      $(sourceImageForm).find('.imagemsg').css('visibility','visible'); 
      $(sourceImageForm).find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');



      return true;   
}

Now what is happening is that when the user uploads a file, the text input and buttons re hidden and the loading bar will be displayed underneath where the file input and buttons were, then when the uploading is finished then the success message is displayed underneath where the loading bar was. The problem with all this though is that it takes up too much space.

What I want to do is the following:

1. User will use the file input to upload file uing the file input and upload button
2. When uploading the loading bar will replace the file input and buttons so that it is placed where the file input and buttons were.
3. When user finishes uploading, the loading bar is replaced with the file input and the original buttons and the success mesage is displayed underneath and underneath the success message is where it displays the uploaded file names and Remove button for each file name
4. Repeat process for next uploading file

My question is how to achieve the above points? At the moment my code is doing this below:

Below is the file input:

Below is where the loading bar appears when the user is uploading a file, it hides the rest of the elements to just show the loading bar and the cancel button but this is displayed underneath where the file input and buttons was:

Below is where it displays the success message and file name with remove button, but this is displayed underneath the the loading bar would have been. As you can see it is too big of a gap in between and I want to narrow it, so instead of hide and show, I prefer a replace with.

Answer 1

Use

.css('display','none');

Instead of visibility:hidden

When you hide something by setting visibility to hidden, it still takes up space in your layout. If you want it to behave like it isn’t there at all, you need to set display instead. To bring it back, just set display to block or whatever it was before you hid it. Or even better, just use jQuery’s .hide() and .show() functions (which means you don’t have to worry about whether it was originally block or inline).