it-swarm.com.de

Wie lade ich ein Bild mit dem jQuery-Client hoch und füge es einem div hinzu?

Wie der Titel schon sagt, möchte ich einen Upload-Button haben, mit dem ein Kunde ein Bild hochladen kann, das dann in einem Div angezeigt wird.

Dies wäre natürlich nur eine Client-Seite. Wenn die Seite also jemals aktualisiert würde, würde das Bild verschwinden.

Das Bild würde dann entsprechend gestylt und mit festen Breiten und Höhen versehen.

Ich habe online gesucht und konnte überhaupt nichts finden.

Sehr neu in jQuery, obwohl ich fließend in Javascript codieren kann.

Auch nicht sicher, ob dies ohne die Hilfe von AJAX und/oder PHP möglich ist oder nicht. Möchte diese wenn möglich vermeiden.

Jede Hilfe wird sehr geschätzt.

11
Fizzix

Hier ist ein Arbeits JSFiddle für das, was Sie suchen

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

Als Randbemerkung verwendet die obige Lösung jQuery, obwohl dies für eine funktionierende Lösung nicht erforderlich ist, nur 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" />

Lesen Sie das jsFiddle Fork hier, um zu erklären, wie Sie jQuery besser nutzen können, um einige Ihrer Fragen zu beantworten.

28
Nunners

Verweisen Sie dies http://www.codeforest.net/html5-image-upload-resize-and-crop

sie können HTML5-Tags wie "canvas" für dasselbe verwenden ... und Sie können auch Jquery-Plugins wie "jCrop" für dasselbe verwenden.

0
Neel