Javascript: carica un'immagine dall'URL e visualizza

Voglio prefigurare questo con il fatto che sono molto nuovo in JavaScript. Apprezzo la tua pazienza con me.Javascript: carica un'immagine dall'URL e visualizza

Sto provando a creare uno script che consenta a un utente di immettere un nome in un'area di testo, premere Invia e un'immagine viene visualizzata in base a tale nome.

sono riuscito a venire con questo:

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

cui quasi non esattamente quello che mi serve -loads un'immagine intorno a quello che un input dell'utente. Ma quello che voglio non è che l'immagine si apra in una nuova finestra, o scarichi sul mio computer - voglio che venga visualizzata sulla pagina quando si fa clic come un'immagine come the example here.

Sono sicuro che la mia inesperienza con Javascript è la causa principale del mio essere incapace di capirlo. Lo script sopra è il più lontano possibile senza rovinare tutto. Qualsiasi aiuto è apprezzato.

fonte

2013-07-13 user2579872

Stai utilizzando una libreria javascript di pianura? –

window.location.href lo sta dicendo di aprire in una nuova finestra. Ti suggerisco di usare jQuery proprio come nell'esempio che hai visto. – dcodesmith

Quando il pulsante viene premuto, ottenere il valore dell'ingresso e utilizzarlo per creare un elemento di immagine è allegato al corpo (o altrove):

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

FIDDLE

stesso in jQuery:

$('#btn').on('click', function() { 
    var img = $('<img />', {src : 'http://webpage.com/images/' + $('#imagename').val() +'.png'}); 
    img.appendTo('body'); 
});

fonte

2013-07-13 20:43:36 adeneo

Questo è esattamente quello che cercavo. Grazie. Ora devo solo capire come hai fatto. Capisco quello che hai detto, devo solo avvolgere la mia mente un paio di volte prima che tramonti. – user2579872

Ho appena assegnato al pulsante un ID e collegato un gestore onclick e in quel gestore, quando si fa clic sul pulsante, ottiene il valore del testo immesso, crea l'URL, come è possibile vedere nelle variabili e quindi crea un elemento immagine, imposta la proprietà src dell'immagine nell'URL e aggiunge quell'immagine al corpo. Tuttavia, non rimuove le immagini, ma dovrebbe essere facile da capire o semplicemente fare un'altra domanda. Sei il benvenuto a BTW. – adeneo

Sei alla ricerca di qualcosa di simile:

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

fonte

2013-07-13 20:45:20

Aggiungere un div con ID imgDiv e rendere il vostro script

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

ho cercato di stare più vicino al tuo originale come tp non sopraffare con jQuery e tale

fonte

2013-07-13 20:46:02 mplungjan

Devi idea giusta la generazione del url basato sul valore di input. L'unico problema è che stai usando window.location.href. L'impostazione window.location.href modifica l'url della finestra corrente. Quello che probabilmente vuoi fare è cambiare l'attributo src di un'immagine.

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

fonte

2013-07-13 20:46:17

Un'immagine senza attributo src non è HTML valido. http://w3c.github.io/html/single-page.html#the-img-element Tuttavia, funziona come desiderato almeno in Firefox. –

Stavi solo manca un tag di immagine per cambiare l'attributo "src" di:

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

fonte

2013-07-13 20:51:41 Mike

-1

In primo luogo, vi consiglio caldamente di utilizzare una libreria o di quadro per fare il vostro Javascript. Ma solo per qualcosa di molto semplice, o per il divertimento, è ok. (puoi usare jquery, underscore, knockoutjs, angular)

In secondo luogo, non è consigliabile associare direttamente a onclick, il mio primo suggerimento va anche in questo modo.

Quello che ti serve è modificare l'src di un img nella tua pagina.

Nel luogo in cui si desidera la vostra immagine visualizzata, si dovrebbe inserire un tag img come questo:

Successivamente, è necessario modificare l'onclick per aggiornare l'attributo src.Il modo più semplice che posso pensare è come la sua

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

Poi di nuovo, non è il modo migliore per farlo, ma è un inizio. Ti consiglio di provare jQuery e vedere come puoi ottenere lo stesso senza usare onclick (tip ... controlla la sezione su jquery sugli eventi)

Ho fatto un semplice violino come esempio del tuo poblem usando alcuni loghi di google. .. inserisci 4 o 3 nella casella e otterrai due immagini di dimensioni diverse. (Sorry .. non ho tempo per la ricerca di immagini migliori come esempio)

http://jsfiddle.net/HsnSa/

fonte

2013-07-13 21:02:47 Fernando

Javascript: carica un'immagine dall'URL e visualizza

risposta

Problemi correlati