Javascript: lädt ein Bild aus url und display

Ich möchte Vorwort dies mit der Tatsache, dass ich bin sehr sehr neu in JavaScript. Ich Schätze Ihre Geduld mit mir.

Ich versuche, ein Skript zu erstellen ermöglicht einem Benutzer die Eingabe eines namens in einem text-Bereich, drücken Sie senden und ein Bild wird angezeigt, basierend auf diesem Namen.

Habe ich es geschafft zu kommen mit diesem:

<html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="window.location.href='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
</body>
</html>

Welche fast genau das tut, was ich brauche -wird ein Bild geladen, um was für ein Benutzer-Eingaben. Aber was ich sagen will ist nicht, dass das Bild in einem neuen Fenster öffnen, oder download auf meinen computer - ich will, dass es auf der Seite angezeigt, wenn Sie geklickt werden, wie ein Bild wie das Beispiel hier.

Ich bin mir sicher, dass meine Unerfahrenheit mit Javascript-ist die wichtigste Ursache meines seins nicht in der Lage, um dies herauszufinden. Das script oben ist so weit, wie ich bekommen kann ohne Schrauben Dinge. Jede Hilfe ist willkommen.

  • Sind Sie mit einer Bibliothek von einfachen javascript?
  • Fenster.Lage.href erzählt, es zu öffnen in einem neuen Fenster. Ich schlage vor, Sie nutzen jQuery-genau wie das Beispiel, das Sie sah.
InformationsquelleAutor user2579872 | 2013-07-13
  1. 18

    Wenn der button angeklickt wird, der Wert der Eingabe und erstellen Sie ein Bild-element, das angefügt ist, um den Körper (oder sonstwo) :

    <html>
<body>
<form>
    <input type="text" id="imagename" value="" />
    <input type="button" id="btn" value="GO" />
</form>
    <script type="text/javascript">
        document.getElementById('btn').onclick = function() {
            var val = document.getElementById('imagename').value,
                src = 'http://webpage.com/images/' + val +'.png',
                img = document.createElement('img');

            img.src = src;
            document.body.appendChild(img);
        }
    </script>
</body>
</html>

    GEIGE

    derselben in jQuery:

    $('#btn').on('click', function() {
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'});
    img.appendTo('body');
});
    • Das ist genau das, was ich nach. Danke. Jetzt muss ich nur noch herausfinden, wie du es getan hast. Ich verstehe, was Sie gesagt haben, ich habe einfach zu wickeln meiner Meinung um ein paar mal, bevor es untergeht.
    • Ich gab nur die Schaltfläche eine id, und mit einem onclick-handler und handler, wenn auf die Schaltfläche geklickt wird, wird der Wert der text-Eingabe, erstellt die URL, wie Sie sehen können, in die Variablen, und dann wird ein image-element setzt das src-Eigenschaft des Bildes die URL und fügt das Bild, um den Körper. Allerdings ist Sie nicht entfernen Sie die Bilder, aber das sollte einfach herauszufinden, oder einfach nur eine weitere Frage stellen. Sie sind willkommen, BTW.
    InformationsquelleAutor adeneo
  2. 1

    Müssen Sie richtige Idee generieren der url, basierend auf dem input-Wert. Das einzige Problem ist, Sie sind mit Fenster.Lage.href. Einstellung-Fenster.Lage.href änderungen der url des aktuellen Fensters. Was Sie wahrscheinlich tun möchten, ist ändern Sie das src-Attribut eines Bildes.

    <html>
<body>
<form>
  <input type="text" value="" id="imagename">
  <input type="button" onclick="var image = document.getElementById('the-image'); image.src='http://webpage.com/images/'+document.getElementById('imagename').value +'.png'" value="GO">
</form>
<img id="the-image">
</body>
</html>
    InformationsquelleAutor Alex Wissmann
  3. 1

    Waren Sie nur fehlt ein Bild-tag zu ändern, das "src" Attribut:

        <html>
<body>
<form>
<input type="text" value="" id="imagename">
<input type="button" onclick="document.getElementById('img1').src =          'http://webpage.com/images/' + document.getElementById('imagename').value +'.png'"     value="GO">
<br/>
<img id="img1" src="defaultimage.png" />
</form>
</body>
</html>
    InformationsquelleAutor Mike
  4. 0

    Sind Sie nach so etwas wie dieses:

     <html>
 <head>
    <title>Z Test</title>
 </head>
 <body>

<div id="img_home"></div>

<button onclick="addimage()" type="button">Add an image</button>

<script>
function addimage() {
    var img = new Image();
    img.src = "https://www.google.com/images/srpr/logo4w.png"
    img_home.appendChild(img);
}
</script>
</body>
    InformationsquelleAutor Jeremy J Starcher
  5. 0

    Fügen Sie ein div mit der ID imgDiv und machen Sie Ihr Skript

     document.getElementById('imgDiv').innerHTML='<img src=\'http://webpage.com/images/'+document.getElementById('imagename').value +'.png\'>'

    Ich habe versucht, so zu bleiben, wie nah an Ihrem ursprünglichen wie tp nicht überwältigen Sie mit jQuery und solche

    InformationsquelleAutor mplungjan
  6. -1

    Erste ist, empfehle ich die Verwendung einer Library oder einem Framework zu tun, Ihr Javascript. Aber nur für etwas sehr einfach, oder für den Spaß zu erfahren, ist es ok. (Sie können verwenden, jquery, underscore, knockoutjs, eckig)

    Zweite, es ist nicht ratsam, um eine direkte Bindung zu onclick, mein Erster Vorschlag geht auch in diese Richtung.

    Das sagt
    Was Sie brauchen, ist zu ändern Sie die src des img in die Seite.

    In den Ort, wo Sie wollen Ihr Bild angezeigt wird, sollten Sie ein img-tag wie dieser:

    Als Nächstes müssen Sie ändern die onclick-update das src-Attribut. Der einfachste Weg, ich kann denken von ist wie sein

    onclick=""document.getElementById('image-placeholder').src = 'http://webpage.com/images/' + document.getElementById('imagename').value + '.png"

    Dann wieder, es ist nicht der beste Weg, es zu tun, aber es ist ein Anfang. Ich empfehle Ihnen, zu versuchen, jQuery und sehen, wie können Sie den selben Zweck erfüllen, ohne mit onclick (Tipp... check den Abschnitt auf jquery über die Ereignisse)

    Ich habe einen einfachen fiddle als Beispiel für dein poblem der Verwendung von einigen google-logos... Typ 4 o-3 in die box, und Sie werden zwei Bilder mit unterschiedlicher Größe. (sorry.. ich habe keine Zeit für die Suche nach bessere Bilder als Beispiel)

    http://jsfiddle.net/HsnSa/

    InformationsquelleAutor Fernando
Schreibe einen Kommentar