Dynamisches Eintrag - Check - Upload hinzufügen

Carrear

Erfahrenes Mitglied
Hi Leute,

ich habe ein Formular, welches ich dynamisch absenden und in eine MySQL Datenbank eintragen lasse. Dieses Formular enthält aktuell nur Textfelder. Ich möchte dem ganzen aber noch folgendes hinzufügen. Es soll ein Upload Feld hinzukommen für ein Profilbild. Das augewählte Bild soll dann also


  • umbenannt,
  • proportional an meine minimal und maximal-größenangaben angepasst,
  • und in einem bestimmten ordner gespeichert

werden. Nur wenn das alles funktioniert hat sollen überhaupt die anderen Daten aus den Textfeldern eingetragen werden. Klappt das nicht alles, dann soll NICHTS in die DB eingetragen werden! Klappt der Upload sollen wie gesagt alle Textdaten und der Dateiname der hochgeladenen Datei in die entsprechende DB eingetragen werden.

Im besten Fall wird das ganze Formular während dieses Vorgangs durch eine grafik ersetzt (ladegif). Klappt alles dann wird alles durch eine Erfolgsmeldung ersetzt. Klappt es nicht, dann wird das formular wieder angezeigt.

Hier erstmal der vorhandene Code aufs wichtigste reduziert:

INDEX.PHP

Code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
$(document).ready(function(){
    $("#submit").click(function() {
        var name = $('#name').val();
        var prename = $('#prename').val();
        $.ajax({
           type: 'POST',
           url: 'add.php',
           data: 'name=' + name + '&prename=' + prename,
           success: function(response){
             $('#anzeige1').append('<div id="response">' + response + '</div>');
           }
        });
        return false;
    });
});
</script>
</head>
<body>
        <form>
        <input type="text" id="name" name="name" value="Name" />
        <input type="text" id="prename" name="prename" value="Vorname" />
        <input type="submit" id="submit" name="submit" value="Eintragen" />
        </form>
        <div id="anzeige1"></div>
</body>
</html>

ADD.PHP

PHP:
<?php
header('Content-Type: text/html; charset=utf-8');
setlocale (LC_ALL, 'de_DE@euro', 'de_DE', 'deu_deu', 'ge');

$username = 'username';
$password = "password";
$hostname = "host"; 

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("databasename",$dbhandle) or die("Could not select examples");

$name = $_POST['name'];
$prename = $_POST['prename'];

$eintrag = "INSERT INTO persons (name,prename) VALUES ('$name', '$prename')";
$eintragen = mysql_query($eintrag);

if($eintragen == true)
   {
   echo "Eintrag war erfolgreich";
   }
else
   {
   echo "Fehler beim Speichern";
   }

mysql_close($dbhandle);
?>
 
Es gibt dafür mehrere Möglichkeiten: einerseits die "Best-Practice", welche wirklich AJAX verwendet, aber leider noch nicht in allen Browsern unterstützt wird, oder die Pseudo-AJAX-Variante, bei der du die Datei in einem iFrame hochlädst. Dabei müsstest du dann allerdings wie bei einem Chat Polling einsetzen, um zu erfahren, ob die Datei hochgeladen wurde oder nicht, und ob ein Fehler aufgetreten ist. Das kannst du natürlich minimieren, in dem du damit erst anfängst, wenn auf den Sende-Button geklickt wurde, und was endet, wenn du eine Antwort erhalten hast.

Zur Best-Practice schau dir mal folgendes zur File API an (besonders das erste Beispiel): http://www.html5rocks.com/de/tutorials/file/dndfiles/
 
Das Browser Problem wäre kein Problem, weil ich ohnehin nicht auf Kompatibilität spiele :) Schaue es mir nach der arbeit an :) Danke
 
Zurück