如何清除文件输入

Question

If you look at this code carefully, it appends a file input for each appended row. Now with every file input there is a "Clear File" button where it is suppose to remove whatever is in the file input. The problem is that it is not clearing anything in the file input. Why is this and how can it be fixed?

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;   
}

Answer 1

Your general strategy seems sound—to "clear" an input of type file by replacing it with another input element. I have no idea why it doesn't work, here is a simple POJS version that does work:

<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>

Answer 2

I wrote a function to clear file input. It works well for all browsers.

demo: 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);
        }
    }
}

for your code, you should modify as following:

    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]);
    });