如何清除文件输入元素

How to clear file input element

本文关键字：文件 输入 元素 清除 何清除      更新时间：2023-09-26

我这里有一个应用程序，用户可以在其中添加一行并显示文件输入。

尝试清除文件输入时遇到 2 个问题：

问题1：如果我在应用程序中添加2行，如果我填写两个文件输入并单击其中一行中的"单击文件"按钮，那么它不是清除行中的文件，而是清除所有行中的文件不正确，它应该清除我要清除文件的行中的文件。

问题2：在我尝试通过单击"上传"按钮上传文件后，上传成功与否，如果我选择另一个文件，然后尝试通过单击"清除文件"来清除它，那么它根本不会清除文件。

如何解决这两个问题：

<script type="text/javascript">
 var sourceImageForm; 
function insertQuestion(form) {   
    var $tbody = $('#qandatbl > tbody'); 
    var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
    var $image = $("<td class='image'></td>"); 

    var $fileImage = $("<form action='imageupload.php' method='post' enctype='multipart/form-data' target='upload_target' onsubmit='startImageUpload(this);' class='imageuploadform' >" + 
    "<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/><label class='imagelbl'>" + 
    "(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label>" + 
    "<input type='submit' name='submitBtn' class='sbtn' value='Upload' /></label>" + 
    "<label><input type='button' name='imageClear' class='imageClear' value='Clear File'/></label>" +
    "</p> <iframe class='upload_target' name='upload_target' src='#' style='wclassth:0;height:0;border:0px;solclass #fff;'></iframe></form>");      
    $image.append($fileImage);
    $tr.append($image);  
    $tbody.append($tr); 
      $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
});
}
function startImageUpload(imageuploadform){
  $(imageuploadform).find('.imagef1_upload_process').css('visibility','visible');
  $(imageuploadform).find('.imagef1_upload_form').css('visibility','hidden');
  sourceImageForm = imageuploadform;
      return true;
}
function stopImageUpload(success){
      var result = '';
      if (success == 1){
         result = '<span class="msg">The file was uploaded successfully!<'/span><br/><br/>';
      }
      else {
         result = '<span class="emsg">There was an error during file upload!<'/span><br/><br/>';
      }
      $(sourceImageForm).find('.imagef1_upload_process').css('visibility','hidden');
      $(sourceImageForm).find('.imagef1_upload_form').html(result + '<label>Image File: <input name="fileImage" type="file"/></label><br/><label>(jpg, jpeg, pjpeg, gif, png, tif)</label><br/><br/><label><input type="submit" name="submitBtn" class="sbtn" value="Upload" /></label><label><input type="button" name="imageClear" class="imageClear" value="Clear File"/></label>');
      $(sourceImageForm).find('.imagef1_upload_form').css('visibility','visible');     
      return true;   
}
</script>

问题 1 是由以下行引起的：

$(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

这意味着当您单击任何"清除文件"按钮时，所有具有"fileImage"类的元素都会被替换，而不仅仅是与按钮属于同一形式的元素。用以下内容替换它应该有效：

 $(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");

由于我正在使用jquery选择器，因此首先选择单击按钮所属的表单，然后在该表单中找到"fileImage"元素。

下面的代码将在您指向该类时清除页面中存在的所有文件输入

 $(".imageClear").click(function(event){
  event.preventDefault();
  $(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage'   
      />");
  });

替换为 

$(".imageClear").click(function(event){
  event.preventDefault();
  $(this).closest(".fileImage").replaceWith("<input type='file' class='fileImage'    
    name='fileImage'/>");
  });

我希望它会起作用...

相关文章：