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(...)正在破坏表单元素的内容。如果现有代码适用于成功条件，那么您应该保持原样。当您处理错误条件时（error如果您有 RESTful 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);

Notice the === for comparison which avoids some JavaScript automatic coercion. This will head off bugs when doing things like comparing a value to 1. You'd also be best off avoiding the way you're using a return value, but at the least you may want to use pseudo constants/enum and a dispatch table style object.

于 2012-09-23T19:49:50.543 回答