Comment effacer un fichier précédent à partir d'un "type d'entrée" en HTML5 FileReader

J'ai un fichier d'entrée:

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

La fonction est comme ci-dessous:

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

Tout fonctionne parfaitement. Maintenant, j'ai un bouton Modifier. Je veux que si quelqu'un clique dessus puis précédente fichier téléchargé-détails de l'être disparu. La fonction est quelque chose comme ci-dessous:

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

});

Peut vous aider sur ce point?

InformationsquelleAutor the.big.lebowski | 2013-11-27
  1. 10

    Si vous mettez votre fichier d'entrée à l'intérieur d'un <form> balise, vous pouvez utiliser le construit en .reset() méthode.

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

    Sans JS 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();
});
    • Comment voulez-vous faire cela sans jQuery?
    • David Kehoe: mise à Jour de ma réponse avec un exemple sans jQuery.
    InformationsquelleAutor sudee
  2. 17

    Si vous souhaitez conserver les données dans d'autres champs de formulaire, vous pouvez utiliser

    HTML

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

    jQuery

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

    cela va effacer votre fichier téléchargé à partir de balise d'entrée

    • Ou en pure javascript: let file_picker = document.getElementById('yourid'); file_picker.value = '';
    InformationsquelleAutor Aerious
  3. 0

    Dans React j'ai connu ce problème de fichier d'entrées sur google chrome navigateurs. Je l'ai réparé avec une combinaison de value="" et autoComplete={"new-password"}

    <input
  value=""
  type="file"
  autoComplete={"new-password"}
  onChange={e => pickHandler(e)}
/>
    InformationsquelleAutor chidimo