So löschen Sie eine Dateieingabe

Question

Wenn Sie diesen Code sorgfältig betrachten, hängt er eine Dateieingabe für jede angehängte Zeile an. Jetzt gibt es bei jeder Dateieingabe eine "Clear File" -Schaltfläche, wo alles entfernt werden soll, was in der Dateieingabe ist. Das Problem ist, dass nichts in der Dateieingabe gelöscht wird. Warum ist das und wie kann es behoben werden?

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

Ihre allgemeine Strategie scheint Schall auf „clear“ eine Eingabe vom Typ Datei, indem es mit einem anderen Eingabeelement zu ersetzen. Ich habe keine Ahnung, warum es nicht, hier funktioniert ist eine einfache POJS Version, die funktioniert:

<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

ich eine Funktion geschrieben Datei-Eingabe zu löschen. Es funktioniert gut für alle Browser.

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

für Ihren Code, sollten Sie ändern, wie folgend:

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