[英]How to clear a file input
如果仔細查看此代碼,它會為每個附加行附加一個文件輸入。 現在對於每個文件輸入都有一個“清除文件”按鈕,它應該刪除文件輸入中的任何內容。 問題是它沒有清除文件輸入中的任何內容。 為什么會這樣,如何解決?
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();
$(this).parent().find(".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;
}
您的總體策略似乎很合理——通過用另一個輸入元素替換它來“清除”類型文件的輸入。 我不知道為什么它不起作用,這是一個簡單的 POJS 版本,它確實有效:
<form>
<input type="file" name="fileName">
<input type="button" onclick="clearFileName(this);" value="Clear file input">
</form>
<script type="text/javascript">
function clearFileName(el) {
var input = el.form.fileName;
input.parentNode.replaceChild(input.cloneNode(false), input);
}
</script>
我寫了一個 function 來清除文件輸入。 它適用於所有瀏覽器。
演示: http://jsbin.com/muhipoye/1/
function clearInputFile(f){
if(f.value){
try{
f.value = ''; //for IE11, latest Chrome/Firefox/Opera...
}catch(err){
}
if(f.value){ //for IE5 ~ IE10
var form = document.createElement('form'), ref = f.nextSibling;
form.appendChild(f);
form.reset();
ref.parentNode.insertBefore(f,ref);
}
}
}
對於您的代碼,您應該修改如下:
function clearInputFile(f){
if(f.value){
try{
f.value = '';
}catch(err){
}
if(f.value){
var form = document.createElement('form'), ref = f.nextSibling;
form.appendChild(f);
form.reset();
ref.parentNode.insertBefore(f,ref);
}
}
}
$(".imageClear").click(function(){
clearInputFile($(this).closest('form').find('input[type="file"]')[0]);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.