Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  
Autor Nachricht
Beitrag24.03.2012 um 12:16 (UTC)    
Titel: Javacript. Anfrage, ob Eingabe eine Bild-URL ist?

Hallo!

Ich habe auf folgender Seite (http://penner-items.de.tl/Fake_Award-Editor.htm) drei Eingabefelder (Inputs), wo bei einem eine Bild-URL eingegeben werden muss. Wie kann ich mit Javascript überprüfen, ob es sich bei der eingabe wirklich um eine bild-url und nicht nur irgendeinen text handelt?
______________
Beitrag24.03.2012 um 12:21 (UTC)    
Titel:

Du kannst den eigegebenen Text von hintern her bis zum Punkt abschneiden und dann überprüfen ob dieser Teil jpg, jpeg, png,... entspricht. Wink
Außerdem kannst du prüfen ob der Text mit http:// beginnt, ob er Leerzeichen enthält, ob sich der Teil vor dem ersten / nach dem Muster http:// ... .TLD zusammensetzt usw.
______________
Mit mir chatten? Besuche uns auf CookieChat.de (keine Anmeldung nötig, einfach einen Spitznamen einegeben)
Beitrag24.03.2012 um 13:45 (UTC)    
Titel:

freefunstuff hat Folgendes geschrieben:
Du kannst den eigegebenen Text von hintern her bis zum Punkt abschneiden und dann überprüfen ob dieser Teil jpg, jpeg, png,... entspricht. Wink
Außerdem kannst du prüfen ob der Text mit http:// beginnt, ob er Leerzeichen enthält, ob sich der Teil vor dem ersten / nach dem Muster http:// ... .TLD zusammensetzt usw.



ja, so dachte ich mir das ja auch Very Happy ...aber wie geht das??
______________
Beitrag24.03.2012 um 15:07 (UTC)    
Titel:

Hallo,

du kannst entweder die Methode indexOf verwenden und alles einzeln prüfen, oder was effektiver und auch schöner ist, du verwendest reguläre Ausdrücke mit der Methode search. Dafür stellt das window Objekt das RegExp Objekt zur Verfügung.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 24.03.2012, 16:39, insgesamt einmal bearbeitet
Beitrag25.03.2012 um 11:29 (UTC)    
Titel:

o-4-n hat Folgendes geschrieben:
Hallo,

du kannst entweder die Methode indexOf verwenden und alles einzeln prüfen, oder was effektiver und auch schöner ist, du verwendest reguläre Ausdrücke mit der Methode search. Dafür stellt das window Objekt das RegExp Objekt zur Verfügung.


Ja, und wie geht das? Also search() hatte ich auch schon in Betracht gezogen, aber weiß nicht, wie genau ich die abfrage mit document.getElementById('BILD') machen muss!
______________
Beitrag25.03.2012 um 23:50 (UTC)    
Titel:

penner-items hat Folgendes geschrieben:
Ja, und wie geht das?

Was verstehst du denn nicht?

penner-items hat Folgendes geschrieben:
aber weiß nicht, wie genau ich die abfrage mit document.getElementById('BILD') machen muss!

Einfach mit dem Punktoperator über das String Objekt die Methode aufrufen und ihr den regulären Ausdruck übergeben. Die Methode gibt -1 zurück, wenn der Ausdruck nicht passt und ansonsten die Stelle des ersten Treffers. Eigentlich Kinderleicht...
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 26.03.2012, 00:51, insgesamt einmal bearbeitet
Beitrag26.03.2012 um 15:22 (UTC)    
Titel:

du redest immer von regulärer Ausdruck und Methoden...ich hab keine Ahnung von sowas, deswegen frag ich doch Very Happy
______________
Beitrag26.03.2012 um 20:55 (UTC)    
Titel:

Das Problem daran ist, dass du dich hier im Supportbereich befindest. Wenn dir jemand etwas erstellen soll, wovon ich aufgrund deiner Ahnungslosigkeit ausgehe, solltest du bei ich suche fragen. Hier wird dir keiner in ein paar Sätzen Javascript beibringen können.

Methoden sind Funktionen, die ein Objekt bereit stellt und das Verhalten der Objekte charakterisieren.

Ein regulärer Ausdruck ist ein syntaktisches Konstrukt, das eine Sprache bezeichnet.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag27.03.2012 um 09:28 (UTC)    
Titel:

o-4-n hat Folgendes geschrieben:
Das Problem daran ist, dass du dich hier im Supportbereich befindest. Wenn dir jemand etwas erstellen soll, wovon ich aufgrund deiner Ahnungslosigkeit ausgehe, solltest du bei ich suche fragen. Hier wird dir keiner in ein paar Sätzen Javascript beibringen können.

Methoden sind Funktionen, die ein Objekt bereit stellt und das Verhalten der Objekte charakterisieren.

Ein regulärer Ausdruck ist ein syntaktisches Konstrukt, das eine Sprache bezeichnet.



Okay...wenn es in 'ICh Suche' soll, dann verschieb es doch bitte dahin und helf mir Very Happy
______________
Beitrag27.03.2012 um 22:36 (UTC)    
Titel:

penner-items hat Folgendes geschrieben:
Okay...wenn es in 'ICh Suche' soll, dann verschieb es

Nö, ich habe die Hoffnung noch nicht aufgegeben, dass du vielleicht doch noch etwas Eigeninitiative zeigst. Wink

penner-items hat Folgendes geschrieben:
doch bitte dahin und helf mir

Mach ich doch schon die ganze Zeit. Very Happy

Also gut, dann bin ich mal nicht so. Da der Baukasten ein paar Eigenheiten hat, die du für reguläre Ausdrücke wissen musst, zeige ich dir jetzt mal das grobe Prinzip. Um alle eventualitäten und besonderheiten, der einzelnen Labels darfst du dich aber selbst kümmern. Wegen der bereits erwähnten Baukasten Eigenart, definieren wir den regulären Ausdruck, als String:
Zitat:
reg='';


Vor unserem Ausdruck darf nichts stehen:
Zitat:
reg='^';


Als erstes folgt dann in jeder URL das Schema. Ich denke in dem Fall dürfte http und https ausreichen. Also muss die Eingabe mit http oder mit https beginnen:
Zitat:
reg='^(http|https)';


Danach folgt ein Doppelpunkt:
Zitat:
reg='^(http|https):';


gefolgt von 2 Slashs. Da der Slash aber ein reserviertes Zeichen ist, muss er escapte werden. Dafür wird der Backslash verwendet. Hier kommt jetzt die Baukasteneigenart ins Spiel. Aus mir unerklärlichen Gründen werden die Backslashes Serverseitig entfernt. Daher müssen wir etwas tricksen und ihn dynamisch erzeugen. Javscript bietet die Funktion unescape. Diese funktion wandelt Hexadezimalwerte von Zeichen in das zugehörige ASCII Zeichen um. Der Hexadezimalwert für den Backslash ist 5C (5 * 16^1 + 12 * 16^0 = 92):
Zitat:
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/';


Jetzt kann ein www. kommen, muss aber nicht. Was aber auf jedenfall folgt ist eine Zeichenkette. Wie bereits gesagt, mache ich es einfach. Wenn du es exakt machen möchtest, kannst du mal google fragen, welche Zeichen erlaubt sind (Das sind mittlerweile nämlich einige und die sind auch noch vom Label abhängig) und den Ausdruck dadurch genau definieren. Also sagen wir, es muss einfach eine Zeichenkette folgen, die mindestens 1 Zeichen lang ist:
Zitat:
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/' + unescape('%5c') + 'S+';


Nach dieser Zeichenkette muss mindestens einmal die Zeichenfolge Punkt Zeichenkette Slash für das Label und den url-path folgen:
Zitat:
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/' + unescape('%5c') + 'S+(' + unescape('%5c') + '.' + unescape('%5c') + 'S+' + unescape('%5c') + '/)+';


Nach dieser Folge folgt für den Namen des Bildes auf dem Server wieder eine Zeichenkette, die mit dem Punkt abgeschlossen wird:
Zitat:
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/' + unescape('%5c') + 'S+(' + unescape('%5c') + '.' + unescape('%5c') + 'S+' + unescape('%5c') + '/)+' + unescape('%5c') + 'S+' + unescape('%5c') + '.';


Als letztes folgt normalerweise das Dateiformat (Ich beschränke es mal auf jpg, gif, png und bmp), danach darf nichts mehr folgen. Was mir jetzt aber gerade einfällt, es gibt auch URLs, bei denen du nicht erkennen kannst, ob es sich um ein Bild handelt! Hier aber mal der fertige grobe reguläre Ausdruck:
Zitat:
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/' + unescape('%5c') + 'S+(' + unescape('%5c') + '.' + unescape('%5c') + 'S+' + unescape('%5c') + '/)+' + unescape('%5c') + 'S+' + unescape('%5c') + '.(png|jpg|bmp|gif)$';


Wenn ich mich nicht vertippt und/oder etwas vergessen habe, müsste das so klappen. Wie aber gesagt, es gibt auch URLs, bei denen du nicht erkennst ob es sich um ein Bild handelt. Hier könntest du ein Image Objekt anlegen und prüfen, ob dieses richtig geladen wird.

Anwenden tut man reguläre Ausdrücke wie bereits gesagt, auf String Objekte mit der Methode search. Search gibt -1 zurück, wenn der Test negativ war und ansonsten die Stelle, des ersten treffers. Bsp:
Zitat:
var url = 'http://abcdefg.de/bild.png';
url.search(reg) != -1 ? alert('Die URL führt zu einem Bild!') : alert('Die URL ist leider kein Bild!');

______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 28.03.2012, 00:57, insgesamt 3-mal bearbeitet
Beitrag28.03.2012 um 12:07 (UTC)    
Titel:

Okay, jetzt hab ich es zumindest verstanden...leider klappt es nicht...

EDIT: Soll heißen: auch Adressen, die kein bild enthalten werden als richtig erkannt...Beispiel:

http://static.pennergame.de/img/pv4/icons/awards/1.gif <- Adresse vom richtigen Bild...wird als richtig erkannt

http://static.pennergame.de/img/pv4/awards/1.gif <- '/icons' weggelassen...trotzdem als richtig erkannt

http://static.pennergame.de/img/awards/1.gif <- '/pv4' weggelassen, auch als Bild erkannt

http://static.pennergame.de/awards/1.gif <- '/img' weggelassen, auch als Bild erkannt

http://static.pennergame.de/1.gif '/awards' weggelassen, auch als Bild erkannt

http://static.pennergame.de1.gif <- '/' weggelassen, erst jetzt als Falsch erkannt!


Hab das ganze jetzt wie folgt eingebaut:

Code:
var url = document.getElementById('BILD').value;
reg='^(http|https):' + unescape('%5c') + '/' + unescape('%5c') + '/' + unescape('%5c') + 'S+(' + unescape('%5c') + '.' + unescape('%5c') + 'S+' + unescape('%5c') + '/)+' + unescape('%5c') + 'S+' + unescape('%5c') + '.(png|jpg|bmp|gif)$';
if (url.search(reg) == -1 || document.getElementById('BILD').value == "") {
document.getElementById('BILD').style.backgroundColor = '#ff0000';
document.getElementById('ERROR3').innerHTML = 'Du musst eine Bild-URL eingeben!';
}else {
document.getElementById('BILD').style.backgroundColor = '#008000';
document.getElementById('BILDID').setAttribute("src", document.getElementById('BILD').value);
}

______________


Zuletzt bearbeitet von penner-items am 28.03.2012, 13:13, insgesamt einmal bearbeitet
Beitrag28.03.2012 um 12:25 (UTC)    
Titel:

Natürlich werden die URLs als richtig erkannt, sie sind ja auch richtig. Wink
Du kannst damit nur prüfen, ob die URLs Syntaktisch korrekt sind und das sind sie! Woher willst du den anhand der URL wissen, ob die URL auch tatsächlich existiert?

Deine Frage ist damit beantwortet, die lautete nämlich:
penner-items hat Folgendes geschrieben:
Wie kann ich mit Javascript überprüfen, ob es sich bei der eingabe wirklich um eine bild-url und nicht nur irgendeinen text handelt?

...und nicht, wie kann ich prüfen, ob die URL existiert? Die Antwort auf diese Frage, habe ich dir in meinem letzten Beitrag übrigens auch gegeben:
o-4-n hat Folgendes geschrieben:
Wie aber gesagt, es gibt auch URLs, bei denen du nicht erkennst ob es sich um ein Bild handelt. Hier könntest du ein Image Objekt anlegen und prüfen, ob dieses richtig geladen wird.

Gleiches gilt, wenn du prüfen willst, ob die URL auch existiert.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering


Zuletzt bearbeitet von o-4-n am 28.03.2012, 13:27, insgesamt 2-mal bearbeitet
Beitrag28.03.2012 um 12:34 (UTC)    
Titel:

Ah, okay...und wie meintest du das mit
Zitat:
Hier könntest du ein Image Objekt anlegen und prüfen, ob dieses richtig geladen wird.



Habe mal danach recherchiert und irgendwie immer nur solche for-Schleifen gefunden die mit onLoad() agiert haben und darauf gewartet haben, bis eine komplette Seite fertig geladen ist...
______________
Beitrag28.03.2012 um 18:46 (UTC)    
Titel:

Was willst du denn mit irgendwelchen Schleifen?

Erzeuge das Image Objekt:
Zitat:
var img = new Image();


Gebe dem Source Attribut des Objekts die URL und setze den onload- und den onerror event, des Image Objekts. Bei den beiden events führst du dann jeweils eine andere Funktion aus.

Falls onerror ausgeführt wird, ist beim Laden wie der Name schon sagt, ein Fehler aufgetretten. Bei onload war das Laden erfolgreich.
______________
mfg
o-4-n

"If you’re incompetent, you can’t know you’re incompetent." - [David Dunning]

*** Die Suchfunktion ist KEINE tödliche Krankheit! ***

Eventplanung, Equipment, Zeltverleih, Catering
Beitrag29.03.2012 um 12:48 (UTC)    
Titel:

Okay, so ist es jetzt, aber wo liegt der fehler?

Code:
function notload() {
document.getElementById('ERROR3').innerHTML = 'Du musst eine Bild-URL eingeben!';
document.getElementById('BILD').style.backgroundColor = '#ff0000';
document.getElementById('BILDID').setAttribute("src", 'http://img.webme.com/pic/p/penner-items/leer.png');
}

function load() {
document.getElementById('BILD').style.backgroundColor = '#008000';
document.getElementById('BILDID').setAttribute("src", document.getElementById('BILD').value);
}

var img = new Image();
img.src = document.getElementById('BILD').value;
img.onload = load();
img.onerror = notload();

______________
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de