gpt4 book ai didi

javascript - 如何清除文件输入元素

转载 作者:行者123 更新时间:2023-11-30 06:42:21 25 4
gpt4 key购买 nike

我有一个申请here用户可以在其中添加一行并显示文件输入。

我在尝试清除文件输入时遇到 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”元素。

关于javascript - 如何清除文件输入元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/10089217/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com