Uploadscript mit Drag&Drop verbessern/erstellen

[Rocky]

Hallo ,
ich habe ein Uploadscript geschrieben, dass mir Dateien auf einen Server in einen bestimmten Ordner hochlädt.
Nun habe ich mit HTML 30 Felder für die Dateien zum hochladen erstellt.
Leider ist es sehr mühsam alle Dateien einzeln auszuwählen.
Nun komme ich zu einem Problem (kann leider noch nicht so gut JavaScript/Jquery, bins gerade dank eines Buches am lernen):
Ich möchte, dass ich beliebig viele Dateien von meinem Rechner via Drag&Drop (mit Javascript/Jquery, bitte kein HTML5) hinzufügen und beim klick auf "Hochladen!" alle files nacheinander (eventuell mit Fortschrittsbalken) hochladen.
Könnt ihr mir da weiterhelfen und mir mit einem solchen Script helfen?
Danke Schonmal,
Rocky007
Hier noch der Source Code meines bisherigen Formulars:

 <form action="upload.php" method="post" enctype="multipart/form-data">
 <font size="3" family="Calibri">Mehrere Scans gleichzeitig hochladen</font><br /><br />
 <table>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
  <tr>
   <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td> <td><input type="file" name="thefile[]"></td>
  </tr>
 </table>
 <input type="submit" value="Hochladen!">
 </form>

 

[Lime]

Für gewöhnlich kann man Dateien einfach per Drag&Drop in ein fileupload-Feld reinziehen, ohne dass man da groß was dazuprogrammieren müsste. Welchen Browser verwendest du?

Das mit dem Upload und dem Fortschrittsbalken ist wieder eine andere Geschichte. Das geht - soweit ich weiß - nur über Javascript.
Stichwort: Ajax.

Edit:
Was durchaus geht mit Javascript ist, dass du beim Aufrufen der Seite erst ein Feld hast zum Hochladen einer Datei und per Klick auf einen Button "weitere Datei hochladen" ein weiteres Feld bekommst. Das macht die Seite nicht so wuchtig.

 

[ComFreek]

Für einen echten Fortschrittsbalken musst du alle Dateien mittels JavaScript einlesen und via AJAX an deinen Server senden.

Siehe hierzu auch mein Tutorial: http://www.tutorials.de/content/1239-file-upload-per-javascript-html-5-file-api.html

Allerdings setzt das HTML 5 voraus!

Wenn du Drag & Drop auf jedem beliebigen HTML-Element erfassen möchtest, brauchst wiederum HTML 5!

Wieso willst du kein HTML 5?

 

[chans]

Hi Rocky,

schau dir mal Uploadify (http://www.uploadify.com) an. Ist ziemlich einfach einzubinden und macht genau was du möchtest. Funktioniert ebenfalls gut mit PHP auf Server-Side.

Gruß
Chans