0

下面我有一个文件输入和 2 个控制文件上传的开始和停止的 javascript 函数。

文件输入：

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>");

开始上传功能：

    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;
}

停止上传功能：

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;   
}

现在发生的情况是，当用户上传文件时，文本输入和按钮将被隐藏，并且加载栏将显示在文件输入和按钮所在的下方，然后当上传完成时，成功消息将显示在下方加载栏是。然而，这一切的问题在于它占用了太多空间。

我想要做的是以下内容：

  1. 用户将使用文件输入和上传按钮使用文件输入上传文件
  2. 上传时加载栏将替换文件输入和按钮，使其放置在文件输入和按钮所在的位置。
  3. 当用户完成上传时，加载栏被文件输入和原始按钮替换，成功消息显示在下方，成功消息下方显示上传的文件名和每个文件名的删除按钮
  4. 重复下一个上传文件的过程

我的问题是如何实现上述几点？目前我的代码在下面执行此操作：

下面是文件输入：

在此处输入图像描述

下面是用户上传文件时加载栏出现的位置，它隐藏了其余元素以仅显示加载栏和取消按钮，但这显示在文件输入和按钮所在的下方：

在此处输入图像描述

下面是显示成功消息和带有删除按钮的文件名的位置，但这显示在加载栏的下方。如您所见，两者之间的差距太大，我想缩小它，所以我更喜欢替换为而不是隐藏和显示。

在此处输入图像描述

4

1 回答 1

2

采用

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

代替visibility:hidden

当您通过设置隐藏某些内容visibility时hidden，它仍然会占用布局中的空间。如果您希望它表现得像根本不存在，则需要设置display。要将它带回来，只需将其设置display为block或隐藏它之前的任何内容。或者更好的是，只使用 jQuery 的.hide()和.show()函数（这意味着您不必担心它最初是block还是inline）。

于 2013-01-23T19:55:46.243 回答