Question Prévisualiser une image avant qu'elle ne soit téléchargée


Je veux être en mesure de 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 ceci?


1177
2017-12-16 09:51


origine


Réponses:


S'il vous plaît jeter un oeil à 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>
<form id="form1" runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

En outre, vous pouvez essayez cet exemple ici.


1941
2017-12-16 09:55



Il y a plusieurs façons de le faire. Le moyen le plus efficace serait d'utiliser URL.createObjectURL () sur le Fichier de ton <input>. Passez cette URL à img.src pour dire au navigateur de charger l'image fournie.

Voici un exemple:

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var output = document.getElementById('output');
    output.src = URL.createObjectURL(event.target.files[0]);
  };
</script>

Vous pouvez aussi utiliser FileReader.readAsDataURL () pour analyser le fichier depuis votre <entrée>. Cela créera une chaîne en mémoire contenant une représentation base64 de l'image.

<input type="file" accept="image/*" onchange="loadFile(event)">
<img id="output"/>
<script>
  var loadFile = function(event) {
    var reader = new FileReader();
    reader.onload = function(){
      var output = document.getElementById('output');
      output.src = reader.result;
    };
    reader.readAsDataURL(event.target.files[0]);
  };
</script>


233
2017-11-27 08:17



Une solution de doublure:

Le code suivant utilise des URL d'objet, ce qui est beaucoup plus efficace qu'une URL de données pour afficher des images volumineuses (Une URL de données est une chaîne énorme contenant toutes les données du fichier, alors qu'une URL d'objet est juste une courte chaîne Mémoire):

<img id="blah" alt="your image" width="100" height="100" />

<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

L'URL générée sera comme:

blob:http%3A//localhost/7514bc74-65d4-4cf0-a0df-3de016824345

128
2017-11-18 20:00



La réponse de LeassTaTT fonctionne bien dans les navigateurs "standards" comme FF et Chrome. La solution pour IE existe, mais semble différente. Voici la description de la solution cross-browser:

En HTML, nous avons besoin de deux éléments de prévisualisation, img pour les navigateurs standards 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>

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

CSS:

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

En HTML, nous incluons les Javascripts standards et 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 pic_preview.js est le Javascript de la réponse de LeassTaTT. Remplace 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. Fonctionne dans IE7, IE8, FF et Chrome. S'il vous plaît tester dans IE9 et signaler. L'idée de l'aperçu 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


41
2017-12-24 11:58



J'ai édité la réponse de @ Ivan pour afficher l'image "Aucun aperçu disponible", s'il ne s'agit pas d'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');
    }
}

22
2018-06-05 06:23



Voici un plusieurs fichiers version, basée sur la réponse d'Ivan Baev.

Le HTML

<input type="file" multiple id="gallery-photo-add">
<div class="gallery"></div>

JavaScript / jQuery

$(function() {
    // Multiple images preview in browser
    var imagesPreview = function(input, placeToInsertImagePreview) {

        if (input.files) {
            var filesAmount = input.files.length;

            for (i = 0; i < filesAmount; i++) {
                var reader = new FileReader();

                reader.onload = function(event) {
                    $($.parseHTML('<img>')).attr('src', event.target.result).appendTo(placeToInsertImagePreview);
                }

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

    };

    $('#gallery-photo-add').on('change', function() {
        imagesPreview(this, 'div.gallery');
    });
});

Nécessite jQuery 1.8 en raison de l'utilisation de $ .parseHTML, ce qui devrait aider avec l'atténuation XSS.

Cela fonctionnera hors de la boîte, et la seule dépendance dont vous avez besoin est jQuery.


14
2017-12-14 15:30



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

Tu peux recevoir Démonstration en direct d'ici.


11
2017-07-25 11:20



Propre et simple JSfiddle

Cela sera utile lorsque vous voulez que l'événement soit déclenché indirectement à partir d'un div ou d'un bouton.

<img id="image-preview"  style="height:100px; width:100px;"  src="" >

<input style="display:none" id="input-image-hidden" onchange="document.getElementById('image-preview').src = window.URL.createObjectURL(this.files[0])" type="file" accept="image/jpeg, image/png">

<button  onclick="HandleBrowseClick('input-image-hidden');" >UPLOAD IMAGE</button>


<script type="text/javascript">
function HandleBrowseClick(hidden_input_image)
{
    var fileinputElement = document.getElementById(hidden_input_image);
    fileinputElement.click();
}     
</script>

7
2017-11-30 05:57