Aperçu d'une image avant son téléchargement


1617

Je souhaite pouvoir prévisualiser un fichier (image) avant son téléchargement. 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?


Notez que sauf si vous utilisez Gears ou un autre plugin, vous ne pouvez pas manipuler l'image à l'intérieur du navigateur: code.google.com/p/chromium/issues/detail?id=32276
Steve-o

Découvrez cette approche JavaScript pure, y compris sa réponse et le commentaire de Ray Nicholus pour la solution finale: stackoverflow.com/questions/16430016/…
Jonathan Root

Voici un bel article détaillé avec une démo en direct codepedia.info/2015/06/…
Satinder singh

8
Voici une solution simple qui n'utilise pas jquery: developer.mozilla.org/en-US/docs/Web/API/FileReader/…
John Gilmer

Réponses:


2540

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]); // convert to base64 string
  }
}

$("#imgInp").change(function() {
  readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form runat="server">
  <input type='file' id="imgInp" />
  <img id="blah" src="#" alt="your image" />
</form>

Vous pouvez également essayer cet exemple ici .


5
Vous pouvez améliorer un peu les performances en définissant une fois le lecteur. jsfiddle.net/LvsYc/638
Jaider

84
Pourquoi utiliser jQuery pour `$ ('# blah'). Attr ('src', e.target.result);` alors que vous auriez pu simplement le fairedocument.getElementById('blah').src=e.target.result)
EasyBB

4
J'ai fait une implémentation ReactJS de cela . Fonctionne comme un charme. @kxc vous devriez faire un appel ajax et envoyer en input.files[0]tant que données, voir le doc de jQuery .
Sumi Straessle

@IvanBaev input.files[0]n'a pas le chemin complet. Comment FileReader trouve-t-il le fichier?
Old Geezer

4
Peu importe, chaque fois que vous ne pouvez pas utiliser jquery car il est gonflé et la vanille vous donnera des résultats plus rapides, surtout si vous avez des tonnes de scripts.
EasyBB

357

Vous pouvez procéder de plusieurs manières. Le moyen le plus efficace serait d'utiliser URL.createObjectURL () sur le fichier à partir de votre <input> . Transmettez cette URL à img.src pour indiquer 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]);
    output.onload = function() {
      URL.revokeObjectURL(output.src) // free memory
    }
  };
</script>

Vous pouvez également utiliser FileReader.readAsDataURL () pour analyser le fichier à partir de votre <input>. Cela va créer 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>


40
Lisez attentivement: readAsDataURL et createObjectURL met en cache une image dans le navigateur, puis renvoie une chaîne codée en base64 qui fait référence à l'emplacement de l'image dans le cache. Si le cache du navigateur est effacé, la chaîne encodée en base64 ne fera plus référence à l'image. La chaîne base64 n'est pas des données d'image réelles, c'est une référence URL à l'image, et vous ne devez pas l'enregistrer dans une base de données en espérant récupérer des données d'image. J'ai récemment fait cette erreur (il y a environ 3 minutes).
tfmontague

9
pour éviter les problèmes de mémoire, vous devez appeler URL.revokeObjectURLlorsque vous avez terminé avec votre blob
Apolo

@Apolo pas dans ce cas, voir cette réponse: stackoverflow.com/a/49346614/2313004
grreeenn

Essayer votre solution .... merci
Ajay Kumar

219

Solution monocouche:

Le code suivant utilise des URL d'objet, qui est beaucoup plus efficace que l'URL de données pour afficher de grandes images (une URL de données est une énorme chaîne contenant toutes les données du fichier, tandis qu'une URL d'objet, n'est qu'une courte chaîne faisant référence aux données du fichier en 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

2
@Raptor, tout comme l'API File entière ... ( FileReader, input.filesetc.) URL.createObjectURLest la voie à suivre pour traiter les fichiers soumis par l'utilisateur, il crée uniquement un lien symbolique en mémoire vers le fichier réel sur le disque de l'utilisateur.
Kaiido

@cnlevy Comment pouvons-nous accéder aux fichiers téléchargés? Est-il uniquement possible de l'obtenir à partir de l'URL comme vous l'avez mentionné? Pour être précis, j'utilise un flacon qui prend déjà en charge l'accès aux fichiers téléchargés. Y a-t-il un autre moyen avec ce one-liner?
Abhishek Singh

c'est la meilleure réponse de tous les temps
Navid Farjad

Cette solution n'a pas fonctionné pour moi. L'aperçu de l'image ne s'affiche pas.
Sundaramoorthy J

Meilleure réponse! Merci
A7madev

46

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

En HTML, nous avons besoin de deux éléments de prévisualisation, imgpour les navigateurs standard et divpour 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 standard 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>

C'est pic_preview.jsle Javascript de la réponse du LeassTaTT. Remplacez le par $('#blah')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. Veuillez 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


24

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

19

Voici une version à fichiers multiples , 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 à l'atténuation XSS.

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


16

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 la démo en direct à partir d'ici.


11

JSfiddle propre et simple

Cela sera utile lorsque vous souhaitez que l'événement soit déclenché indirectement à partir d'une 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>

Juste une note: je ne peux pas m'en attribuer le mérite, mais vous pouvez utiliser <label>et éviter le javascript pour gérer complètement le clic sur le bouton. Déclenchez la saisie de fichiers avec du HTML / CSS pur. , et ce n'est pas du tout hacky.
Regular Joe

7

Exemple avec plusieurs images en utilisant JavaScript (jQuery) et HTML5

JavaScript (jQuery)

function readURL(input) {
     for(var i =0; i< input.files.length; i++){
         if (input.files[i]) {
            var reader = new FileReader();

            reader.onload = function (e) {
               var img = $('<img id="dynamic">');
               img.attr('src', e.target.result);
               img.appendTo('#form1');  
            }
            reader.readAsDataURL(input.files[i]);
           }
        }
    }

    $("#imgUpload").change(function(){
        readURL(this);
    });
}

Balisage (HTML)

<form id="form1" runat="server">
    <input type="file" id="imgUpload" multiple/>
</form>

5

Que diriez-vous de 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, pas seulement pour prévisualiser les 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 certains utilisateurs, mais je pense que vous comprendrez tout. Ici vous pouvez voir un exemple


5

Voici le code de travail.

<input type='file' onchange="readURL(this);" /> 
<img id="ShowImage" src="#" />

Javascript:

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

            reader.onload = function (e) {
                $('#ShowImage')
                    .attr('src', e.target.result)
                    .width(150)
                    .height(200);
            };

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

4

Dans React, si le fichier est dans vos accessoires, vous pouvez utiliser:

{props.value instanceof File && (
    <img src={URL.createObjectURL(props.value)}/>
)}

1
Cela m'a sauvé la vie! Beaucoup plus simple que la solution React utilisant FileReader
Jonathan

2

Et cette solution?

Ajoutez simplement l'attribut de données "data-type = editable" à une balise d'image comme celle-ci:

<img data-type="editable" id="companyLogo" src="http://www.coventrywebgraphicdesign.co.uk/wp-content/uploads/logo-here.jpg" height="300px" width="300px" />

Et le script de votre projet bien sûr ...

function init() {
    $("img[data-type=editable]").each(function (i, e) {
        var _inputFile = $('<input/>')
            .attr('type', 'file')
            .attr('hidden', 'hidden')
            .attr('onchange', 'readImage()')
            .attr('data-image-placeholder', e.id);

        $(e.parentElement).append(_inputFile);

        $(e).on("click", _inputFile, triggerClick);
    });
}

function triggerClick(e) {
    e.data.click();
}

Element.prototype.readImage = function () {
    var _inputFile = this;
    if (_inputFile && _inputFile.files && _inputFile.files[0]) {
        var _fileReader = new FileReader();
        _fileReader.onload = function (e) {
            var _imagePlaceholder = _inputFile.attributes.getNamedItem("data-image-placeholder").value;
            var _img = $("#" + _imagePlaceholder);
            _img.attr("src", e.target.result);
        };
        _fileReader.readAsDataURL(_inputFile.files[0]);
    }
};

// 
// IIFE - Immediately Invoked Function Expression
// /programming/18307078/jquery-best-practises-in-case-of-document-ready
(

function (yourcode) {
    "use strict";
    // The global jQuery object is passed as a parameter
    yourcode(window.jQuery, window, document);
}(

function ($, window, document) {
    "use strict";
    // The $ is now locally scoped 
    $(function () {
        // The DOM is ready!
        init();
    });

    // The rest of your code goes here!
}));

Voir la démo sur JSFiddle


2

Essaye ça

window.onload = function() {
  if (window.File && window.FileList && window.FileReader) {
    var filesInput = document.getElementById("uploadImage");
    filesInput.addEventListener("change", function(event) {
      var files = event.target.files;
      var output = document.getElementById("result");
      for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image'))
          continue;
        var picReader = new FileReader();
        picReader.addEventListener("load", function(event) {
          var picFile = event.target;
          var div = document.createElement("div");
          div.innerHTML = "<img class='thumbnail' src='" + picFile.result + "'" +
            "title='" + picFile.name + "'/>";
          output.insertBefore(div, null);
        });        
        picReader.readAsDataURL(file);
      }

    });
  }
}
<input type="file" id="uploadImage" name="termek_file" class="file_input" multiple/>
<div id="result" class="uploadPreview">


2

Prévisualisez plusieurs images avant de les télécharger à l'aide de jQuery / javascript?

Cela prévisualisera plusieurs fichiers sous forme d'images miniatures à la fois

Html

<input id="ImageMedias" multiple="multiple" name="ImageMedias" type="file"
accept=".jfif,.jpg,.jpeg,.png,.gif" class="custom-file-input"  value="">                                    
<div id="divImageMediaPreview"></div>

Scénario

$("#ImageMedias").change(function () {
    if (typeof (FileReader) != "undefined") {
        var dvPreview = $("#divImageMediaPreview");
        dvPreview.html("");            
        $($(this)[0].files).each(function () {
            var file = $(this);                
                var reader = new FileReader();
                reader.onload = function (e) {
                    var img = $("<img />");
                    img.attr("style", "width: 150px; height:100px; padding: 10px");
                    img.attr("src", e.target.result);
                    dvPreview.append(img);
                }
                reader.readAsDataURL(file[0]);                
        });
    } else {
        alert("This browser does not support HTML5 FileReader.");
    }
});

Démonstration de travail sur Codepen

Démonstration de travail sur jsfiddle

J'espère que cela vous aidera.


1

J'ai créé un plugin qui peut générer l'effet de prévisualisation dans IE 7+ grâce à Internet, mais a peu de limitations. Je l'ai mis dans une page github pour qu'il soit plus facile de l'obtenir

$(function () {
		$("input[name=file1]").previewimage({
			div: ".preview",
			imgwidth: 180,
			imgheight: 120
		});
		$("input[name=file2]").previewimage({
			div: ".preview2",
			imgwidth: 90,
			imgheight: 90
		});
	});
.preview > div {
  display: inline-block;
  text-align:center;
}

.preview2 > div {
  display: inline-block; 
  text-align:center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://rawgit.com/andrewng330/PreviewImage/master/preview.image.min.js"></script>
	Preview
	<div class="preview"></div>
	Preview2
	<div class="preview2"></div>

	<form action="#" method="POST" enctype="multipart/form-data">
		<input type="file" name="file1">
		<input type="file" name="file2">
		<input type="submit">
	</form>


1

Pour le téléchargement d'images multiples (modification de la solution @ IvanBaev)

function readURL(input) {
    if (input.files && input.files[0]) {
        var i;
        for (i = 0; i < input.files.length; ++i) {
          var reader = new FileReader();
          reader.onload = function (e) {
              $('#form1').append('<img src="'+e.target.result+'">');
          }
          reader.readAsDataURL(input.files[i]);
        }
    }
}

http://jsfiddle.net/LvsYc/12330/

J'espère que cela aide quelqu'un.


1

C'est mon code.Support IE [6-9] 、 chrome 17 + 、 firefox 、 Opera 11 + 、 Maxthon3

   
function previewImage(fileObj, imgPreviewId) {
    var allowExtention = ".jpg,.bmp,.gif,.png";  //allowed to upload file type
    document.getElementById("hfAllowPicSuffix").value;
    var extention = fileObj.value.substring(fileObj.value.lastIndexOf(".") + 1).toLowerCase();
    var browserVersion = window.navigator.userAgent.toUpperCase();
    if (allowExtention.indexOf(extention) > -1) {
        if (fileObj.files) {
            if (window.FileReader) {
                var reader = new FileReader();
                reader.onload = function (e) {
                    document.getElementById(imgPreviewId).setAttribute("src", e.target.result);
                };
                reader.readAsDataURL(fileObj.files[0]);
            } else if (browserVersion.indexOf("SAFARI") > -1) {
                alert("don't support  Safari6.0 below broswer");
            }
        } else if (browserVersion.indexOf("MSIE") > -1) {
            if (browserVersion.indexOf("MSIE 6") > -1) {//ie6
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
            } else {//ie[7-9]
                fileObj.select();
                fileObj.blur(); 
                var newPreview = document.getElementById(imgPreviewId);

                newPreview.style.border = "solid 1px #eeeeee";
                newPreview.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='scale',src='" + document.selection.createRange().text + "')";
                newPreview.style.display = "block";

            }
        } else if (browserVersion.indexOf("FIREFOX") > -1) {//firefox
            var firefoxVersion = parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
            if (firefoxVersion < 7) {//firefox7 below
                document.getElementById(imgPreviewId).setAttribute("src", fileObj.files[0].getAsDataURL());
            } else {//firefox7.0+ 
                document.getElementById(imgPreviewId).setAttribute("src", window.URL.createObjectURL(fileObj.files[0]));
            }
        } else {
            document.getElementById(imgPreviewId).setAttribute("src", fileObj.value);
        }
    } else {
        alert("only support" + allowExtention + "suffix");
        fileObj.value = ""; //clear Selected file
        if (browserVersion.indexOf("MSIE") > -1) {
            fileObj.select();
            document.selection.clear();
        }

    }
}
function changeFile(elem) {
    //file object , preview img tag id
    previewImage(elem,'imagePreview')
}
<input type="file"  id="netBarBig"  onchange="changeFile(this)"  />
<img  src="" id="imagePreview" style="width:120px;height:80px;" alt=""/>


1

Iamge par défaut

                @Html.TextBoxFor(x => x.productModels.DefaultImage, new {@type = "file", @class = "form-control", onchange = "openFile(event)", @name = "DefaultImage", @id = "DefaultImage" })
                @Html.ValidationMessageFor(model => model.productModels.DefaultImage, "", new { @class = "text-danger" })
                    <img src="~/img/ApHandler.png"  style="height:125px; width:125px" id="DefaultImagePreview"/>
            </div>

 <script>
    var openFile = function (event) {
        var input = event.target;

        var reader = new FileReader();
        reader.onload = function () {
            var dataURL = reader.result;
            var output = document.getElementById('DefaultImagePreview');
            output.src = dataURL;
        };
        reader.readAsDataURL(input.files[0]);
    };
</script>

0

Voici une solution si vous utilisez React:

import * as React from 'react'
import { useDropzone } from 'react-dropzone'

function imageDropper() {
  const [imageUrl, setImageUrl] = React.useState()
  const [imageFile, setImageFile] = React.useState()

  const onDrop = React.useCallback(
    acceptedFiles => {
      const file = acceptedFiles[0]
      setImageFile(file)

      // convert file to data: url
      const reader = new FileReader()
      reader.addEventListener('load', () => setImageUrl(String(reader.result)), false)
      reader.readAsDataURL(file)
    },
    [setImageFile, setImageUrl]
  )
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDrop })

  return (
    <div>
      <div {...getRootProps()}>
        {imageFile ? imageFile.name : ''}
        {isDragActive ? <p>Drop files here...</p> : <p>Select image file...</p>}
        <input {...getInputProps()} />
      </div>
      {imageUrl && (
        <div>
          Your image: <img src={imageUrl} />
        </div>
      )}
    </div>
  )
}

0

Il s'agit de la méthode la plus simple pour prévisualiser l'image avant de la télécharger sur le serveur à partir du navigateur sans utiliser Ajax ni aucune fonction compliquée. Il a besoin d'un événement "onchange" pour charger l'image.

<body>
  <input type="file" onchange="preview()">
  <img id="frame" src="" width="100px" height="100px"/>
</body>
<script>
    function preview() {
      frame.src=URL.createObjectURL(event.target.files[0]);
    }
</script>

L'image sera immédiatement chargée après l'avoir sélectionnée.


-2

pour mon application, avec les paramètres d'URL GET chiffrés, seul cela a fonctionné. J'en ai toujours un TypeError: $(...) is null. Tiré de https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL

function previewFile() {
  var preview = document.querySelector('img');
  var file    = document.querySelector('input[type=file]').files[0];
  var reader  = new FileReader();

  reader.addEventListener("load", function () {
    preview.src = reader.result;
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
<input type="file" onchange="previewFile()"><br>
<img src="" height="200" alt="Image preview...">


-2
function assignFilePreviews() {
    $('input[data-previewable=\"true\"]').change(function() {
        var prvCnt = $(this).attr('data-preview-container');
        if (prvCnt) {
            if (this.files && this.files[0]) {
                var reader = new FileReader();
                reader.onload = function(e) {
                    var img = $('<img>');
                    img.attr('src', e.target.result);
                    img.error(function() {
                        $(prvCnt).html('');
                    });
                    $(prvCnt).html('');
                    img.appendTo(prvCnt);
                }
                reader.readAsDataURL(this.files[0]);
            }
        }
    });
}
$(document).ready(function() {
    assignFilePreviews();
});

HTML

<input type="file" data-previewable="true" data-preview-container=".prd-img-prv" />
<div class = "prd-img-prv"></div>

Cela gère également la casse lorsque le fichier de type non valide (ex. Pdf) est choisi

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.