Gockeln IT Consulting

Moin,

ich brauchte für einen Kunden dringend eine einfache Lösung PDF Dateien auf einen Webserver zu übertragen. Es gibt im Netz sehr viele andere Möglichkeiten mittels Flash und Javascript Dateien zu einem Webserver zu übertragen. Ich brauchte aber eine Lösung ohne Flash. Bei meiner Suche bin ich auf einen Artikel von “everflux” gestoßen, dieser wurde allerdings ohne funktionierendes Beispiel veröffentlicht und da dachte ich mir, schreib ich einen ausführlichen Artikel zu diesem Thema, inkl. funktionierendem Beispiel zum Download am Ende.

Fangen wir an:
Was ist unser Ziel? Wir wollen Dateien per HTML Formular über JQuery und PHP auf unseren Webserver übertragen.
Was brauchen wir?
- Die JQuery Javascript Library, ich habe die aktuelle Version jquery-1.4.min.js verwendet
- Eine kleine Animation zur Statusanzeige, die hab ich bei http://www.ajaxload.info/ generiert. (Danke)
- Ein HTML Formular, schreiben wir gleich
- JQuery Script um den Dateiupload an zu stoßen, schreiben wir auch gleich
- Eine PHP Datei (upload_event.php) die den Dateiupload steuert, schreiben wir auch gleich
- Eine Kanne Darjeeling Tee

Jetzt geht´s los, wir schreiben das HTML Formular welches dem Benutzer die Möglichkeit gibt eine Dateiauswahl zu treffen und nach erfolgreichem Upload den Dateinamen angezeigt bekommt.

<table border="0">
<tr>
	<td valign="top">Dateiname:</td>
	<td>
	<form action="upload_event.php" method="post" enctype="multipart/form-data" id="uploadForm">
	<input type="text" name="dateiname" value="" id="dateiname" style="width: 400px;"/>
	<br/>
	<div id="hide"><input type="file" name="pdf"></input><input type="button" name="upload_pdf" value="Hochladen" id="upload_pdf"/></div></form>
	<div id="loader"></div>
	</td>
</tr>
</table>

So, zu sehen ist eine HTML Tabelle inkl. einem Formular. Wichtig ist dass der Tag enctype=”multipart/form-data” in der Formular Definition angegeben ist, ansonsten können wir keine Dateien übertragen. Das Input Feld “dateiname” benötigen wir in diesem Fall nur um den Rückgabewert des PHP Scriptes wieder zu geben. Dann haben wir unser Input Feld für die Dateiauswahl, ich hab´s PDF genannt und einen Button welcher den Prozess startet.

In den Kopf-Teil unserer Webseite bringen wir nun den JQuery Teil ein:

<script type="text/javascript" src="jquery-1.4.min.js"></script>

<script type="text/javascript">

$(function() {

// Formular abschicken

$('#uploadForm').submit(function(data) {

// Ajax Loader anzeigen

$('#loader').html('L&auml;dt...<br/><img src="ajax-loader.gif" border="0"/>');

// Formular Elemente verstecken

$('#inputs').hide();

// abschickendes Formular angeben

var submittingForm = $('#uploadForm');

// eindeutigen iFrame Namen generieren

var frameName = ("upload" + (new Date()).getTime());

// iFrame setzen

var uploadFrame = $('<iframe name="' + frameName + '"></iframe>');

// iFrame verstecken

uploadFrame.css("display", "none");

// iFrame Inhalt laden

uploadFrame.load(function(data) {

// Timeout festlegen

setTimeout(function() {

// Rueckgabewert abfragen

$('#dateiname').val(uploadFrame.contents().find('#result').html());

// iFrame entfernen

uploadFrame.remove();

// Formular Elemente anzeigen

$('#inputs').show();

// Ajax Loader verstecken

$('#loader').hide();

}, 1000);

});

// iFrame zum Body hinzufuegen

$('body:first').append(uploadFrame);

// Formular target zum iFrame setzen

submittingForm.attr('target', frameName);

});

$('#upload_pdf').click(function() {

// Formular abschicken

$('#uploadForm').submit();

});

});

</script>

Der Übersichtlichkeit wegen, habe ich jede Zeile kommentiert. Jetzt brauchen wir noch unsere PHP Datei welche den Dateiupload auf unserem Webserver durchführt:

// In welches Verzeichnis soll geladen werden, hier in das selbe wo die Datei liegt
$uploadDir = dirname(__FILE__) . '/';
// Wie soll die Datei auf dem Webserver genannt werden, hier der Ursprungsname
$uploadFile = $uploadDir . basename($_FILES['pdf']['name']);
// Wenn die Datei erfolgreich uebertragen wurde, dann gib ein Div mit dem Dateinamen zurueck
if(move_uploaded_file($_FILES['pdf']['tmp_name'], $uploadFile)) {
	echo '<div id="result">' . $_FILES['pdf']['name'] . '</div>';
} else {
	echo '<div id="result">Fehler beim Speichern der Datei.</div>';
}

Was passiert nun? Das JQuery Script generiert einen iFrame, dieser wird dem HTML Dokument angehängt und versteckt. Über die load Eigenschaft wird dem iFrame mitgeteilt dass der Postprozess im iFrame durchgeführt werden soll, wo das Formular an die PHP Datei übergeben wird. Die PHP Datei überträgt die Datei auf den Webserver und gibt den Dateinamen zurück, welchen wir über die Zeile

$('#dateiname').val(uploadFrame.contents().find('#result').html());

aus dem iFrame zurück in unser Input Feld “dateiname” schreiben. Von hier aus, kann mit dem Resultat weiter gearbeitet werden.

Ich hoffe ich konnte jemandem  mit dieser Anleitung einen kleinen Anreiz geben wie man solche Dateiuploads per JQuery und PHP steuern kann.

Zum besseren Verständnis habe ich die Scripte noch in eine Zip Datei zum Download gepackt. Das Script habe ich bis jetzt nur im Safari 4 auf meinem Mac getestet.

Download: JQuery Datei upload

Fragen beantworte ich gerne über die Kommentar Funktion oder per E-Mail! Viel Spaß damit!

Gruß,
Arne