File-Uploader mit XMLHttpRequest

Mit diesem File-Uploader können Dateien auf den Webserver hochgeladen werden, ohne, dass eine andere Seite aufgerufen oder diese Seite neu aufgebaut werden muss. Der Lade-Vorgang wird durch eine Ajax-Grafik angezeigt. Dieser File-Uploader wurde erfolgreich mit folgenden Browsern getestet:

Microsoft Internet Explorer 11.0.9600.17959
Mozilla Firefox 40.0.3
Google Chrome 38.0.2125.111
Safari 5.1.7 (7534.57.2)

1. Ordner-Struktur anlegen

Verzeichnis „fileuploader“: Hier werden die Dateien index.html, fileuploader.js und fileuploader.php erstellt.
Verzeichnis „img“: Hier kommen die Grafiken „success.gif“, „fail.gif“ und „xajax_loader.gif“ rein.

2. Grafiken erstellen

Auf der Seite http://www.ajaxload.info/ kann mit wenigen Mausklicks eine Ajax-Loader-Grafik erzeugt werden. Die Generierte Datei in „xajax_loader.gif“ umbenennen und in ein „img“-Verzeichnis kopieren, damit die JavaScript-Datei darauf zugreifen kann. Desweiteren werden zwei grafiken „success.gif“ und „fail.gif“ benötigt.

3. HTML-Seite mit Upload-Formular

index.html

<html>
	<head>
		<title>File-Uploader</title>
		<script type="text/javascript" src="fileuploader.js"></script>
	</head>
	<body>
	<h1>File-Uploader Version 1.0</h1>
	<p><hr></p>
	<h2>Nur XML-Dateien bis max. 25 MB</h2>
		<form name="fileupload" id="fileupload" enctype="multipart/form-data">
			<table width="600" border="1" cellpadding="10">
				<tr>
					<th align="right">test.xml:</th>
					<td>
						<input name="Datei_1" id="Datei_1" type="file" maxlength="100000" onchange="javascript: FileUpload( 1 );" />
						<img id="UploadStatus_1" src="../img/empty.gif" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>

4. JavaScript-Datei für Datei-Upload

fileuploader.js

	function FileUpload( id )
	{
		var img = document.getElementById( "UploadStatus_" + id );
		var form = document.getElementById("fileupload");
		img.src = "/img/xajax_loader.gif";
 
		var xmlhttp = new XMLHttpRequest();
		var formData = new FormData( form );
		xmlhttp.open("POST","fileuploader.php?id=" + id, true );
 		xmlhttp.send( formData );
 
		xmlhttp.onreadystatechange=function()
		{
			if( xmlhttp.readyState==4 && xmlhttp.status==200 ) // "Alle Daten wurden empfangen" & "Ok"
			{
				response = xmlhttp.responseText;
 
				if( response == "1" ) // Ergebnis aus fileuploader.php
				{
					img.src = "/img/success.gif";
					img.alt = "Dokument erfolgreich hochgeladen";
					img.title = "Dokument erfolgreich hochgeladen";
				}
				else
				{
					alert( "Es ist ein Fehler beim Hochladen der Datei aufgetreten!" );
					img.src = "/img/fail.gif";
					img.alt = "Dokumenten-Fehler";
					img.title = "Dokumenten-Fehler";
				}
			}
		}
	}

5. PHP-Datei für Datei-Upload

fileuploader.php

	if( isset( $_FILES['Datei_' . $_GET['id']] ) )
	{
		$file = $_FILES['Datei_' . $_GET['id'] ];
		$types = array( "text/xml", "application/xml", "application/octet-stream" );
 
		if( $file['error'] == 0 & $file['size'] < 26214400 ) // kleiner als 25 MB
		{	
			foreach( $types as $type )
			{
				if( $type == $file['type'] )
				{
					if( move_uploaded_file ( $file['tmp_name'], $_SERVER['DOCUMENT_ROOT'] . "/import/" . $file['name'] ) )
						echo "1";
					else
						echo "-1";
				}
			}
		}
	}

Wissensarchiv für Entwickler

Benutzer-Werkzeuge

Webseiten-Werkzeuge