2012-04-10 99 views
2

我有一個應用程序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> 

回答

0

問題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」元素。

+0

嗨所有,我把這個代碼,但問題是,它沒有明確的文件當我點擊「清除文件」按鈕 – user1324106 2012-04-10 13:39:18

+0

從你告訴我什麼,好像它沒有被解僱的單擊事件的一切,你可以看看如何用「的」觸發事件的例子方法介紹jQuery的最新版本[見小提琴(http://jsfiddle.net/Ktsww/8/) – txominpelu 2012-04-10 14:33:44

0

下面的代碼將清空當前頁面中所有文件的輸入,你都指向類

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

我希望它會工作...

+0

您好,我把這個代碼,但問題是,它沒有明確的文件,當我點擊「清除文件」按鈕 – user1324106 2012-04-10 13:36:59