0

基本的に、次のコードが問題を引き起こしています。

$(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden'); 
$(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden'); 
/// THIS LINE BELOW 
$(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>'); 
/// THIS LINE ABOVE 
$(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');

上記のコードは、アップロードが成功またはエラーになった後に実行されるコードから抜粋したものです。このコードは、画像のアップロードを担当するフォームを上書きします。インターフェイスは画像ごとに個別のフォームを使用するため、これは成功しても問題ありません...一度成功すると、そのフォームを再度再利用することはありません（サーバー側で後続のアップロードでエラーが発生することはありません）。

ただし、画像のアップロードがエラーまたはキャンセルされた場合、そのフォームを再利用して画像を再度アップロードしようとしますか? その場合、numimage 入力 html を上書きして削除しました。

<input type='hidden' class='numimage' name='numimage' value='" numimage "' />

つまり、このフィールドはもう存在しないため、エラーが発生します。

私の質問は、どうすればこれを修正できますか? 非表示の入力フォームの値を失わず、フィールドがまだ存在するようにするにはどうすれば問題を解決できますか?

アップデート：

以下は画像入力フォームです。

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target_image' onsubmit='return imageClickHandler(this);' class='imageuploadform' >" + 
"<input type='hidden' class='numimage' name='numimage' value='" + numimage + "' />" +
"<div class='display_content_image'>" +
"<p class='imagef1_upload_process' align='center'>Loading...<br/><img src='Images/loader.gif' /><br/></p>" +
"<p class='imagef1_upload_form' align='center'><br/><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>" + 
"</p><p class='imagef1_cancel' align='center'><label>" +
"<input type='reset' name='imageCancel' class='imageCancel' value='Cancel' /></label>" +
"</p><p class='listImage' align='left'></p>" +
"<iframe class='upload_target_image' name='upload_target_image' src='#' style='width:300px;height:300px;border:0px;solid;#fff;'></iframe></div></form>");

$image.append($fileImage);

以下は、画像ファイルのアップロードを開始する完全な jquery コードです。

function startImageUpload(imageuploadform){

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

        $(imageuploadform).find(".imageCancel").on("click", function(event) {
                  $('.upload_target_image').get(0).contentwindow
              $("iframe[name='upload_target_image']").attr("src", "javascript:'<html></html>'");
    return stopImageUpload(2);

});      


  return true;

}

以下は、画像ファイルのアップロードを停止する完全な jquery コードです。

function stopImageUpload(success, imagefilename){

      var result = '';
      imagecounter++;

      var replaceForm = function(result) { 
  $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" class="fileImage" type="file"/></label><br/><br/><label><input type="submit" name="submitImageBtn" class="sbtnimage" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
} 

var updateForm = function(result) { 
  $(sourceImageForm).find('.imagef1_upload_form').find('.display_content_image').html(result);
} 

var displayInfo;

      if (success === 1){
         result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span><br/><br/>';      
         $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
        displayInfo = replaceForm;      
         }
      else if (success === 2){
          result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
          displayInfo = updateForm;    
      }
      else {
         result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
         displayInfo = updateForm;  
      }
      displayInfo(result); 


      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_cancel').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');


    });
4

1 に答える 1

0

この行: $(sourceImageForm).find('.imagef1_upload_form').html(...)フォーム要素のコンテンツを破壊しています。既存のコードが成功条件で機能する場合は、そのままにしておく必要があります。エラー状態を処理するとき ( errorRESTful API がある場合はコールバックを使用するのが理想的です)、フォーム全体をオーバーライドするのではなく、エラー メッセージ用の特定の要素が必要です。何かのようなもの：

$(sourceImageForm).find('.imagef1_upload_form').find('.error_message').html(msg).show();

更新のサンプル:

var replaceForm = function(result) {
  //existing code to replace full form content
}
var updateForm = function(result) {
  //new code to display error message
}
var displayFunk;
if (success === 1){
  result = '<span class="imagemsg'+imagecounter+'">The file was uploaded successfully</span><br/><br/>';      
  $('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>'); 
  displayFunk = replaceForm;
}
else if (success === 2){
  result = '<span class="imagemsg'+imagecounter+'"> The file upload was canceled</span><br/><br/>';
  displayFunk = updateForm;
}
else {
  result = '<span class="imagemsg'+imagecounter+'">There was an error during file upload</span><br/><br/>';
  displayFunk = updateForm;
}
displayFunk(result);

===JavaScript の自動強制を回避する for 比較に注意してください。これは、値を と比較するようなことを行うときにバグを防ぎます1。また、戻り値を使用する方法を避けるのが最善ですが、少なくとも疑似定数/列挙型とディスパッチ テーブル スタイル オブジェクトを使用することをお勧めします。

于 2012-09-23T19:49:50.543 に答える