Question

基本上以下代码会导致您的问题：

$(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');


    });

Answer 1

这一行： $(sourceImageForm).find('.imagef1_upload_form').html(...)正在破坏表单元素的内容。如果现有代码适用于成功条件，那么您应该保持原样。当您处理错误条件时（如果您有RESTful API，理想情况下使用error回调），而不是覆盖整个表单，您应该具有错误消息的特定元素，然后填充该错误消息。类似的东西：

$(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自动强制。这样可以在执行诸如将值与1进行比较之类的操作时阻止错误。你最好避免使用返回值，但至少你可能想要使用伪常量/枚举和调度表样式对象。

如何修复下面的这个精细输入和jquery错误

1 个答案: