Jak usunąć poprzedni plik z 'input type' w HTML5 FileReader

Question

Mam plik-wejście:

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

funkcja jest jak poniżej:

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

wszystko działa idealnie. Teraz mam przycisk Zmień. Chcę, żeby ktoś kliknął, a poprzednie przesłane szczegóły pliku zniknęły. Funkcja jest podobna do poniższej:

$('#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. 

}); 

Czy możesz w tym pomóc?

Answer 1

Po umieszczeniu pliku wejściowego wewnątrz znacznika <form> można użyć wbudowanej metody .reset().

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

Jeśli chcesz zachować dane w innych pól formularza, można użyć

HTML

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

jQuery

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

będzie to wyczyścić przesłanego pliku z tagu wejściowego