Obtenez la taille du fichier, la largeur et la hauteur de l'image avant le téléchargement.

Question

Comment puis-je obtenir la taille du fichier, la hauteur et la largeur de l'image avant de la télécharger sur mon site web, avec jQuery ou JavaScript ?

Answer 1

Pour autant que je sache, il n'y a pas de moyen facile de le faire puisque Javascript/JQuery n'a pas accès au système de fichiers local. Il y a quelques nouvelles fonctionnalités dans html 5 qui vous permettent de vérifier certaines méta-données telles que la taille du fichier mais je ne suis pas sûr que vous puissiez obtenir les dimensions de l'image.

Voici un article que j'ai trouvé concernant les fonctionnalités de html 5, et une solution pour IE qui implique l'utilisation d'un contrôle ActiveX. http://jquerybyexample.blogspot.com/2012/03/how-to-check-file-size-before-uploading.html

Answer 2

J'ai donc commencé à expérimenter les différentes possibilités offertes par l'API FileReader et j'ai pu créer une balise IMG avec une URL de données.

Inconvénient : Il ne fonctionne pas sur les téléphones mobiles, mais il fonctionne bien sur Google Chrome.

$('input').change(function() {

    var fr = new FileReader;

    fr.onload = function() {
        var img = new Image;

        img.onload = function() { 
//I loaded the image and have complete control over all attributes, like width and src, which is the purpose of filereader.
            $.ajax({url: img.src, async: false, success: function(result){
                    $("#result").html("READING IMAGE, PLEASE WAIT...")
                    $("#result").html("<img src='" + img.src + "' />");
                console.log("Finished reading Image");
                }});
        };

        img.src = fr.result;
    };

    fr.readAsDataURL(this.files[0]);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="file" accept="image/*" capture="camera">
<div id='result'>Please choose a file to view it. <br/>(Tested successfully on Chrome - 100% SUCCESS RATE)</div>

(voir ceci sur un jsfiddle à l'adresse suivante http://jsfiddle.net/eD2Ez/530/ )
(voir le jsfiddle original que j'ai ajouté à l'adresse suivante http://jsfiddle.net/eD2Ez/ )

Answer 3

Un exemple fonctionnel de validation jQuery :

   $(function () {
        $('input[type=file]').on('change', function() {
            var $el = $(this);
            var files = this.files;
            var image = new Image();
            image.onload = function() {
                $el
                    .attr('data-upload-width', this.naturalWidth)
                    .attr('data-upload-height', this.naturalHeight);
            }

            image.src = URL.createObjectURL(files[0]);
        });

        jQuery.validator.unobtrusive.adapters.add('imageminwidth', ['imageminwidth'], function (options) {
            var params = {
                imageminwidth: options.params.imageminwidth.split(',')
            };

            options.rules['imageminwidth'] = params;
            if (options.message) {
                options.messages['imageminwidth'] = options.message;
            }
        });

        jQuery.validator.addMethod("imageminwidth", function (value, element, param) {
            var $el = $(element);
            if(!element.files && element.files[0]) return true;
            return parseInt($el.attr('data-upload-width')) >=  parseInt(param["imageminwidth"][0]);
        });

    } (jQuery));