[英]How to clear file input element
我這里有一個應用程序,用戶可以在其中添加一行並顯示文件輸入。
嘗試清除文件輸入時遇到 2 個問題:
問題 1:如果我在應用程序中添加 2 行,如果我填寫兩個文件輸入並單擊其中一行中的“單擊文件”按鈕,那么它不會清除行內的文件,而是清除所有文件不正確的行,它應該清除我想清除文件的行中的文件。
問題2:在我嘗試通過點擊“上傳”按鈕上傳文件后,上傳成功與否后,如果我select另一個文件然后嘗試通過點擊“清除文件”來清除它,那么它不會清除根本沒有文件。
如何解決這兩個問題:
<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>
當您指向 class 時,以下代碼將清除頁面中存在的所有文件輸入
$(".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'/>");
});
我希望它能奏效...
問題 1 是由這一行引起的:
$(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
這意味着當您單擊任何“清除文件”按鈕時,所有具有 class“fileImage”的元素都會被替換,而不僅僅是與按鈕屬於相同形式的元素。 將其替換為以下內容應該有效:
$(this).parents("form:first").find(".fileImage").replaceWith("<input type='file' class='fileImage' name='fileImage' />");
由於我對 jquery 選擇器所做的是,首先選擇單擊的按鈕所屬的表單,然后在該表單中找到“fileImage”元素。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.