Javascript: Załaduj obraz z adresu URL i wyświetl

Chcę to poprzedzić faktem, że jestem bardzo nowym użytkownikiem JavaScript. Doceniam twoją cierpliwość ze mną.Javascript: Załaduj obraz z adresu URL i wyświetl

Próbuję utworzyć skrypt, który pozwala użytkownikowi wprowadzić nazwę w polu tekstowym, naciśnij przycisk przesyłania, a obraz zostanie wyświetlony w oparciu o tę nazwę.

udało mi się wymyślić to:

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

których prawie nie dokładnie to, czego potrzebuję -loads obraz wokół tego, co a wejść użytkowników. Ale nie chcę, aby obraz otwierał się w nowym oknie lub pobierał na mój komputer - chcę, aby był wyświetlany na stronie po kliknięciu jako obraz taki jak the example here.

Jestem pewien, że mój brak doświadczenia z JavaScriptem jest główną przyczyną braku możliwości zrozumienia tego. Powyższy skrypt jest tak daleki, jak tylko mogę, bez spierania rzeczy. Każda pomoc jest doceniana.

Źródło

2013-07-13 user2579872

używasz bibliotekę zwykły javascript? –

window.location.href mówi, aby otworzyć w nowym oknie. Sugeruję, abyś używał jQuery, tak jak na przykładzie, który zobaczyłeś. – dcodesmith

Po kliknięciu przycisku uzyskać wartość wejścia i używać go do tworzenia element obrazu, który jest dołączany do ciała (lub gdziekolwiek indziej):

<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

samo w jQuery:

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

Źródło

2013-07-13 20:43:36 adeneo

To jest dokładnie to, czego szukałem. Dziękuję Ci. Teraz muszę po prostu dowiedzieć się, jak to zrobiłeś. Rozumiem, co powiedziałeś, po prostu muszę otoczyć mój umysł jeszcze kilka razy, zanim on się pojawi. – user2579872

Właśnie podałem przycisk o identyfikatorze i załączyłem procedurę obsługi onclick, a w tym przycisku obsługi, po kliknięciu przycisku, otrzymuje wartość wpisu tekstowego, tworzy adres URL, jak widać w zmiennych, a następnie tworzy element obrazu, ustawia właściwość src obrazu na adres URL i dołącza ten obraz do treści. Nie usuwa jednak obrazów, ale powinno to być łatwe do wymyślenia lub po prostu zadać inne pytanie. Nie ma za co BTW. – adeneo

Czy jesteś po czymś takim:

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

Źródło

2013-07-13 20:45:20

Dodaj div o identyfikatorze imgDiv i zrobić skrypt

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

starałem się pozostać jak najbliżej oryginalny jak tp nie przytłaczają cię z jQuery i takie

Źródło

2013-07-13 20:46:02 mplungjan

Musisz prawo pomysł generowania adres URL oparty na wartości wejściowej. Jedynym problemem jest użycie window.location.href. Ustawienie window.location.href zmienia adres URL bieżącego okna. Prawdopodobnie chcesz zmienić atrybut src obrazu.

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

Źródło

2013-07-13 20:46:17

Obraz bez atrybutu src jest nieprawidłowy HTML. http://w3c.github.io/html/single-page.html#the-img-element Jednak działa zgodnie z oczekiwaniami przynajmniej w Firefoksie. –

Zostałaś właśnie brakuje znacznika obrazu, aby zmienić „src” atrybut:

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

Źródło

2013-07-13 20:51:41 Mike

-1

pierwsze, sugeruję, aby korzystać z biblioteki lub ram do zrobienia JavaScript. Ale po prostu o coś bardzo prostego lub o zabawę do nauki, jest w porządku. (można użyć jquery, podkreślenia, knockoutjs, kątowego)

Po drugie, nie zaleca się wiązania bezpośrednio do onclick, moja pierwsza sugestia idzie w ten sposób też.

To jest powiedziane Potrzebna jest modyfikacja src pliku img na stronie.

W miejscu, gdzie chcesz, aby obraz wyświetlany, należy wstawić znacznik img tak:

Następnie trzeba zmodyfikować onclick aby zaktualizować atrybut src.Najprostszy sposób, jaki mogę wymyślić, jest taki, jak jego Polecam Ci wypróbować jQuery i zobaczyć, jak możesz zrobić to samo używając onclick (podpowiedź ... sprawdź sekcję o jquery o zdarzeniach)

Zrobiłem proste skrzypce jako przykład Twojego poblem używając niektórych logów google. .. wpisz 4 o 3 w polu, a otrzymasz dwa obrazy o różnej wielkości. (Przepraszam .. nie mam czasu na poszukiwania lepszych zdjęć jako przykład)

http://jsfiddle.net/HsnSa/

Źródło

2013-07-13 21:02:47 Fernando

Javascript: Załaduj obraz z adresu URL i wyświetl

Odpowiedz

Powiązane problemy