如何清除文件输入元素

Question

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

我有2个问题，试图清除文件输入时：

问题1：如果我在应用程序中添加2行，如果我填这两个文件的输入和我点击“点击File”按钮中的一个行，然后，而不是行内清除文件，它是清除文件中的所有行这是不正确，应该清楚，我想清除文件中的行内的文件。

问题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> 

Answer 1

问题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”元素。

Answer 2

下面的代码将清空当前页面中所有文件的输入，你都指向类

$(".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'/>"); 
    }); 

我希望它会工作...