web-dev-qa-db-fra.com

Comment télécharger une image avec le côté client jQuery et l'ajouter à une div?

En gros, comme le titre le dit, je veux un bouton de téléchargement qui permette à un client de télécharger une image qui sera ensuite affichée dans un div.

Bien sûr, il s’agirait uniquement du côté client. Par conséquent, si la page était rafraîchie, l’image disparaîtrait.

L'image serait alors stylée en conséquence et des largeurs et des hauteurs fixes.

J'ai cherché en ligne et je n'ai rien trouvé du tout.

Très nouveau pour jQuery, même si je peux coder couramment en Javascript.

Aussi, ne pas savoir si cela est possible ou non sans l'aide de AJAX et/ou de PHP. Voudrais les éviter si possible.

Toute aide est grandement appréciée.

javascriptjqueryuploadappend
11
Fizzix

Voici un travail JSFiddle pour ce que vous cherchez

function readURL(e) {
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        $(reader).load(function(e) { $('#blah').attr('src', e.target.result); });
        reader.readAsDataURL(this.files[0]);
    }
}

$("#imgInp").change(readURL);

En remarque, la solution ci-dessus utilise jQuery bien que cela ne soit pas nécessaire pour une solution opérationnelle, uniquement avec Javascript:

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

        reader.onload = function (e) {
            document.getElementById('blah').src =  e.target.result;
        }

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

And the HTML:

        <input type='file' id="imgInp" onchange="readURL(this);" />
        <img id="blah" src="#" alt="your image" />

Voir le jsFiddle Fork créé ici pour aider à expliquer comment utiliser davantage jQuery pour répondre à certaines de vos questions.

28
Nunners

Reportez-vous à cette http://www.codeforest.net/html5-image-upload-resize-and-crop

vous pouvez utiliser les balises HTML5 comme canvas pour la même chose ... et vous pouvez également utiliser certains plugins Jquery comme jCrop pour la même chose ..

0
Neel