Prévisualiser une image avant de la télécharger

Je souhaite pouvoir prévisualiser un fichier (image) avant qu'il ne soit téléchargé. L'action de prévisualisation doit être exécutée dans le navigateur sans utiliser Ajax pour télécharger l'image.

Comment puis-je faire cela ?

Justin
Question modifiée 6 septembre 2011 в 10:49
Programmation
file-upload javascript jquery
16 décembre 2010 в 9:51
17 vues
Solution

Veuillez consulter l'exemple de code ci-dessous :

function readURL(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function(e) {
      $('#blah').attr('src', e.target.result);
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  <input type='file' id="imgInp" />
  ![your image](#)

Vous pouvez également [essayer cet exemple ici] (http://jsfiddle.net/LvsYc/).

dgknca
Réponse modifiée 7 juin 2019 в 10:57
Commentaires (13)

La réponse de LeassTaTT fonctionne bien dans les navigateurs "standard&quot ; comme FF et Chrome. La solution pour IE existe, mais elle est différente. Voici la description de la solution multi-navigateurs :

En HTML, nous avons besoin de deux éléments d'aperçu, img pour les navigateurs standard et div pour IE.

HTML :



<div id="preview_ie"></div>

Dans le CSS, nous spécifions la chose suivante, spécifique à IE :

CSS :

#preview_ie {
  FILTER: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)
}

En HTML, nous incluons les Javascripts standard et ceux spécifiques à IE :

<script type="text/javascript">
  {% include "pic_preview.js" %}
</script>  


Le `pic_preview.js` est le Javascript de la réponse de LeassTaTT's. Remplacez le `$('#blah&#39 ;)` par le `$('#preview&#39 ;)` et ajoutez le `$('#preview&#39 ;).show()`.

Maintenant, le Javascript spécifique à IE (pic_preview_ie.js) :

function readURL (imgFile) {
var newPreview = document.getElementById('preview_ie'); newPreview.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = imgFile.value; newPreview.style.width = '160px'; newPreview.style.height = '120px'; } 




C&#8217est tout. Fonctionne dans IE7, IE8, FF et Chrome. Veuillez tester dans IE9 et rapporter.
L'idée de l'aperçu d'IE a été trouvée ici :
http://forums.asp.net/t/1320559.aspx

http://msdn.microsoft.com/en-us/library/ms532969(v=vs.85).aspx
Balthazar
Réponse modifiée 14 août 2015 в 11:30
Commentaires (0)

Pourquoi ne pas créer une fonction qui charge le fichier et déclenche un événement personnalisé ? Attachez ensuite un écouteur à l'entrée. De cette façon, nous avons plus de flexibilité pour utiliser le fichier, et pas seulement pour la prévisualisation des images.

/**
 * @param {domElement} input - The input element
 * @param {string} typeData - The type of data to be return in the event object. 
 */
function loadFileFromInput(input,typeData) {
    var reader,
        fileLoadedEvent,
        files = input.files;

    if (files && files[0]) {
        reader = new FileReader();

        reader.onload = function (e) {
            fileLoadedEvent = new CustomEvent('fileLoaded',{
                detail:{
                    data:reader.result,
                    file:files[0]  
                },
                bubbles:true,
                cancelable:true
            });
            input.dispatchEvent(fileLoadedEvent);
        }
        switch(typeData) {
            case 'arraybuffer':
                reader.readAsArrayBuffer(files[0]);
                break;
            case 'dataurl':
                reader.readAsDataURL(files[0]);
                break;
            case 'binarystring':
                reader.readAsBinaryString(files[0]);
                break;
            case 'text':
                reader.readAsText(files[0]);
                break;
        }
    }
}
function fileHandler (e) {
    var data = e.detail.data,
        fileInfo = e.detail.file;

    img.src = data;
}
var input = document.getElementById('inputId'),
    img = document.getElementById('imgId');

input.onchange = function (e) {
    loadFileFromInput(e.target,'dataurl');
};

input.addEventListener('fileLoaded',fileHandler)

Mon code n'est probablement pas aussi bon que celui de certains utilisateurs, mais je pense que vous comprendrez l'essentiel. Vous pouvez voir ici un [exemple][1].

[1] : http://jsfiddle.net/ajorquera/U6S4T/3/

ajorquera
Réponse modifiée 21 mars 2014 в 1:28
Commentaires (0)