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()かどうかを気にする必要はありません)。blockinline

于 2013-01-23T19:55:46.243 に答える