tox: + (JAVASCRIPT) Konzept für Datenbankformular

Guten Morgen,

wie gestaltet man am Besten ein Formular für das Anlegen eines neuen Objekts in einer mySQL Datenbank. Wobei die Übergabe an die DB jetzt nicht das Thema ist.

Der Admin dieser Seite füllt ein gewöhnliches Formular aus mit den Eigenschaften des neuen Objekts, alles kein Problem. Am Ende des Formulars kann er ein Bild hinterlegen, dieses soll natürlich nur als Link in der DB mitgespeichert werden.

Dazu fällt mir nicht wirklich etwas Elegantes ein: Bisher habe ich die Bezeichnung "Bild 1" und einen <button>Hinzufügen</button>.

Wenn er diesen betätigt, bekommt er ein kleines zusätzliches Fenster mit <input type="file" name="file"> usw. und slektiert eine Datei auf seinem Arbeitsplatz.

Dieses Fenster ruft nach dem Submit ein Skript auf, das dieses Bild abspeichert, in mehrere Formate konvertiert und das Original wieder löscht.

Danach soll das ursprüngliche Formular neugeladen werden und eine Vorschau des Bildes zu sehen sein. (Eine der Versionen die im vorherigen Schritt erzeugt wurden.

Wie würdet Ihr so etwas machen? Beispiele?

Was kann ich tun damit die eingegeben Formulardaten nicht vorloren gehen, ohne einen gigantisch langen Link zu erzeugen? (Die Beschreibung eines Objekts kann ganz schön lange sein.)

Wie bringe ich mein Formular nach Fileupload usw. wieder zum Refreshen?

Und wie kann ich das ganze möglichst Javascriptreduziert tun?

Danke und Gruss

  1. Nachtrag:

    Wie würdet Ihr so etwas machen? Beispiele?

    Am Liebsten wäre es mir wenn ich mein Formular gar nicht verlassen würde, also keine zusätzlichen Seiten aufrufen müsste.

    Die Unterseiten sind eigentlich nur aus der Unmöglichkeit der Anpassung des <input type="file" name="file"> entstanden. Den würde ich am Liebesten gar nicht darstellen.

    Mir reicht einfach ein "Hinzufügen Button" der das Windows Fenster "Datei uploaden" öffnet.

    Das müsste doch irgendwie gehen, oder? Am Besten per onclick...

    1. Ahem, nicht dass wir uns falsch verstehen:

      Ich verzichte auf input/file gerne. Ich suche eine Möglichkeit per Userklick einen Fileupload zu starten. Da ist doch wohl nichts gefähliches dran, oder?

      1. Hallo tox,

        Du kannst nicht auf das input Element type file verzichten.

        Das man es nicht verändern kann hat seine guten Gründe.
        Es gibt einen Workaround wo man es vorgtäuscht etwas gestalten kann. Das funkioniert aber nur eingeschränkt.

        Alles andere hast Du ja schon gut beschrieben, also programmiere es in PHP.

        Wenn Du unbedingt das erst den "Fileupload Button" verstecken möchtest, kannst Du auf JS nicht verzichten.

        Dann könntest Du auch Ajax einbinden und der Benutzer würde Deine Seiten nicht verlassen. Wobei ich das noch nicht mit einem Bildupload ausprobiert habe.

        Viel Spaß beim programmieren.

        Es ist ein absoluter standard den Du da vor hast.

        Liebe Grüße,

        Bernd

        1. hi,

          Dann könntest Du auch Ajax einbinden und der Benutzer würde Deine Seiten nicht verlassen. Wobei ich das noch nicht mit einem Bildupload ausprobiert habe.

          Ich wüsste nicht, was AJAX in Verbindung mit einem Input type=file bringen soll.
          Du brauchst die Bilddaten, um das Bild hochladen zu können - allerdings kommst du mit Javascript nicht an diese dran.

          Wenn der Upload vom Rest des Formulars unabhängig sein soll, dann vielleicht statt dem Popup auch ein (i)Frame.

          gruß,
          wahsaga

          --
          /voodoo.css:
          #GeorgeWBush { position:absolute; bottom:-6ft; }
  2. hi,

    Danach soll das ursprüngliche Formular neugeladen werden und eine Vorschau des Bildes zu sehen sein. (Eine der Versionen die im vorherigen Schritt erzeugt wurden.

    Das neu laden eines Dokumentes aus einem Popup heraus ist ein schon mehrfach behandeltes Thema.

    Was kann ich tun damit die eingegeben Formulardaten nicht vorloren gehen, ohne einen gigantisch langen Link zu erzeugen? (Die Beschreibung eines Objekts kann ganz schön lange sein.)

    Warum willst du denn die Formularseite neu laden?

    Und wie kann ich das ganze möglichst Javascriptreduziert tun?

    Du kannst auf Javascript ganz verzichten - wenn du das "Popup" mittels target="_blank" öffnest, und auf das anschließende neu laden der Formularseite verzichtest.

    Vor allem musst du zwischen zwei unabhängigen Formularen serverseitig eine Verbindung herstellen (können) - dein Server muss wissen, dass das per Popup hochgeladene Bild mit den aus dem anderen Formular stammenden Daten, die später (oder vorher) ankommen, zusammengehört.
    Sessions böten sich vielleicht an.

    gruß,
    wahsaga

    --
    /voodoo.css:
    #GeorgeWBush { position:absolute; bottom:-6ft; }