如何清除文件输入

How to clear a file input

本文关键字：文件 输入 清除 何清除      更新时间：2023-09-26

如果您仔细查看此代码，它会为每个追加的行附加一个文件输入。现在，每个文件输入都有一个"清除文件"按钮，应该在其中删除文件输入中的任何内容。问题是它没有清除文件输入中的任何内容。为什么会这样，如何解决？

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>

我写了一个函数来清除文件输入。它适用于所有浏览器。

演示：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]);
    });
相关文章：