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

Question

Je veux 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 le faire ?

Answer 1

imgInp.onchange = evt => {
  const [file] = imgInp.files
  if (file) {
    blah.src = URL.createObjectURL(file)
  }
}

<form runat="server">
  <input accept="image/*" type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Answer 2

La réponse de LeassTaTT fonctionne bien dans les navigateurs "standard" comme FF et Chrome. La solution pour IE existe mais semble différente. Ici la description de la solution multi-navigateur :

En HTML, nous avons besoin de deux éléments de prévisualisation, img pour les navigateurs standard et div pour IE

HTML :

<img id="preview" 
     src="" 
     alt="" 
     style="display:none; max-width: 160px; max-height: 120px; border: none;"/>

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

Dans le CSS, nous spécifions la chose suivante, spécifique à l'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>  
<!--[if gte IE 7]> 
<script type="text/javascript">
  {% include "pic_preview_ie.js" %}
</script>

Le site pic_preview.js est le Javascript de la réponse de LeassTaTT. Remplacez le $('#blah') avec le $('#preview') et ajoutez le $('#preview').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'est le cas. 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

Answer 3

J'ai modifié la réponse de @Ivan pour afficher l'image "No Preview Available", si ce n'est pas une image :

function readURL(input) {
    var url = input.value;
    var ext = url.substring(url.lastIndexOf('.') + 1).toLowerCase();
    if (input.files && input.files[0]&& (ext == "gif" || ext == "png" || ext == "jpeg" || ext == "jpg")) {
        var reader = new FileReader();

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

        reader.readAsDataURL(input.files[0]);
    }else{
         $('.imagepreview').attr('src', '/assets/no_preview.png');
    }
}

Answer 4

Oui. C'est possible.

Html

<input type="file" accept="image/*"  onchange="showMyImage(this)" />
 <br/>
<img id="thumbnil" style="width:20%; margin-top:10px;"  src="" alt="image"/>

JS

 function showMyImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {           
            var file = files[i];
            var imageType = /image.*/;     
            if (!file.type.match(imageType)) {
                continue;
            }           
            var img=document.getElementById("thumbnil");            
            img.file = file;    
            var reader = new FileReader();
            reader.onload = (function(aImg) { 
                return function(e) { 
                    aImg.src = e.target.result; 
                }; 
            })(img);
            reader.readAsDataURL(file);
        }    
    }

Vous pouvez obtenir Démonstration en direct d'ici.

Answer 5

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. Ici vous pouvez voir un exemple