Wie von einem 'input type' in HTML5 Filereader

Question

Ich habe eine Datei-Eingabe eine vorherige Datei löschen:

<img id="uploadPreview"> 
    <div id="changeImage">Change</div> 
<div id="customImage"> 
    <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" /> 
    <div class='upload blank' id="add-image"></div> 
</div> 

Die Funktion ist wie folgt:

var oFReader = new FileReader(); 
oFReader.readAsDataURL(document.getElementById("myfile").files[0]); 

oFReader.onload = function (oFREvent) { 
    document.getElementById("uploadPreview").src = oFREvent.target.result; 
}; 

function PreviewImage() { 
     var oFReader = new FileReader(); 
     oFReader.readAsDataURL(document.getElementById("myfile").files[0]); 
     $("#uploadPreview").removeClass('hide'); //for manipulating something in the dom 
     $('#changeImage').removeClass('hide'); //for manipulating something in the dom 
     $("#customImage").addClass('hide'); //these are for manipulating something in the dom 

     oFReader.onload = function (oFREvent) { 
      document.getElementById("uploadPreview").src = oFREvent.target.result; 
     }; 
    }; 

Alles funktioniert perfekt. Jetzt habe ich eine Änderungstaste. Ich möchte, wenn jemand darauf klickt und dann die vorher hochgeladenen Datei-Details weg sind. Die Funktion ist etwas wie unten:

$('#changeImage').click(function(){ 
    $('#uploadPreview').addClass('hide'); 
    $('#customImage').removeClass('hide'); 
    //here I want to remove/clear the details about the already previous uploaded file in the 'file-input'. So the same image can be shown if someone clicks it for once again. 

}); 

Können Sie dabei helfen?

Answer 1

Wenn Sie Ihre Dateieingabe in ein <form> Tag setzen, können Sie die eingebaute .reset() Methode verwenden.

HTML:

<img id="uploadPreview"> 
    <div id="changeImage">Change</div> 
<div id="customImage"> 
    <form id="fileform"> 
     <input type="file" id="myfile" multiple style="display:none" onchange="PreviewImage();" /> 
    </form> 
    <div class='upload blank' id="add-image"></div> 
</div> 

JS:

$('#changeImage').click(function(){ 
    $('#uploadPreview').addClass('hide'); 
    $('#customImage').removeClass('hide'); 
    // Reset the form 
    $("#fileform")[0].reset(); 
}); 

---

JS ohne jQuery:

var resetButton = document.getElementById('resetButton'); 
var fileInput = document.getElementById('fileInput'); 
var form = document.getElementById('form'); 

resetButton.addEventListener('click', function() { 
    // resetting the file input only 
    fileInput.value = null; 

    // alternatively: resetting the entire form (works in older browsers too) 
    form.reset(); 
}); 

Answer 2

Wenn Sie in anderen Formularfelder Daten behalten möchten, können Sie

HTML

<input type='file' id='yourid' /> 

jQuery

$('#yourid').val(''); 

dies Ihre hochgeladene Datei aus Input-Tag wird klar, verwenden