[Hilfe]Formular mir Dropzone.js


#1
Hallo Leute, ich bin neu hier und brauche mal eure Hilfe.

Ich möchte gerne eine kleine Seite mit einem dropzone Formular erstellen.
Das ist soweit einfach :)

Was soll die Seite machen:
Man soll dort ganz bestimmte Bilder in die Dropzone ziehen oder in ein Inputfeld einfügen.
Dann soll die Seite gucken ob es die URL gibt und wenn die URL vorhanden ist dann soll das Bild(URL) und der Name in der Dropzone ausgegeben werden.
Wenn die URL nicht richtig ist, dann soll eine Fehlermeldung kommen. Ausgabe in der Dropzone: Das ist kein gültiger Link.
Es soll kein Bild wirklich hochgeladen werden !

Meine Idee für eine Datenbank (SQL, XML oder Text) wäre:
ID, NR, NAME, URL1, URL2
1, 1, Monstername, https://www.tutorials.de/styles/tuts/xenforo/logo.png, https://www.tutorials.de/styles/tuts/xenforo/logo.png

Leider weiss ich nicht wie ich das anstellen soll, damit die Seite die URL prüft und wie man dann die Ausgabe steuert.

Ich bin nicht der große Programmierer, aber ich bin echt bemüht.
Die Google Suche hat nicht viel gebracht, also ich habe zu dem Thema leider nichts gefunden was mir geholfen hat.

Ich wäre echt dankbar wenn mir da einer helfen würde.
Vielen Dank !

Mein bisheriger code:

HTML:
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/dropzone.css" />
    <title>dropzone</title>
</head>
<body>
  <div class="container" style="position: relative;z-index: 20;">
    <div class="row">
      <div class="col-md-12 col-sm-12">
        <div class="container">
          <div class="row">
            <div class="col-md-12 col-sm-12 " style="margin-top:20px;">
                <div id="dropzone">
                    <span>Drag &amp; Drop the Image here</span><br style="clear:both;">
                    <img id="result" src="css/drop-and-drag.png" height="265px">
                    <input type="hidden" id="resulthidden">
                    <span id="result2"></span>
                    <div style="height: 43px;" id="showresult"></div>
                    <input type="text" id="urlpaste" placeholder="or drag &amp; drop the url here" name="urlpaste" maxlength="0">
                </div>
            </div>
            <br style="clear:both;">
          </div>
        </div>
      </div>
    </div>
  </div>

<script src="css/jquery-1.7.1.js"></script>
<script src="css/bootstrap.js"></script>
<script type="text/javascript" src="css/dropzone.js"></script>

<script type="text/javascript">
$(function(){
jQuery.event.props.push('dataTransfer');

$('#dropzone')
    .bind( 'dragenter dragover', false)
    .bind( 'drop', function( e ) {
        e.stopPropagation();
        e.preventDefault();
        $('#showresult').html(e.dataTransfer.getData('text'));
    });
});
</script>

</body></html>
 

Sempervivum

Erfahrenes Mitglied
#2
Man soll dort ganz bestimmte Bilder in die Dropzone ziehen oder in ein Inputfeld einfügen.
Dann soll die Seite gucken ob es die URL gibt
Wenn Du von URL sprichst, schließe ich daraus, dass es sich um Bilder handelt, die auf einer Webseite angezeigt werden? Dann gestaltet es sich aber mit dem Drag&Drop schwierig, weil heute praktisch jeder Browser Tabs hat und man nicht gleichzeitig die Quellseite mit dem Bild und die Dropzone sieht?
 
#3
es geht um bilder aus einem discord bot (bild1) unbd einer webseite (bild2)
es geht ja, mein script kann das ja schon mal mit dem drag & drop...
ich kann ein bild von einer seite auf das tab ziehen und dann in die dropzone legen und es wird schon mal die url angezeigt.

aber wie es dann weiter geht weiss ich leider nicht ;(
es soll ja dann aus einer liste (sql, xml oder text) der link rausgesucht werden und dann das bild + den namen ausgegeben werden.
wenn die url nicht in der liste ist, dann kommt eine meldung...

wäre nett wenn da einer helfen könnte....