Dateiupload ohne Reload der Seite

Dear visitor, welcome to Coder Forum. If this is your first visit here, please read the Help. It explains in detail how this page works. To use all features of this page, you should consider registering. Please use the registration form, to register here or read more information about the registration process. If you are already registered, please login here.

Pandemonium

Unregistered

Tuesday, January 11th 2011, 1:50pm

Dateiupload ohne Reload der Seite

Hallo zusammen.

Vorweg: Ich bin ziemlicher neuling, was AJAX und JS betrifft... außerdem habe ich lange nichts mehr mit PHP gemacht

Folgendes zum aufwärmen:
Mein Plan ist es, das ein Benutzer eine Datei hochlädt ohne einen "sichtbaren" reload auszulösen.
Nach dem Upload soll via responseText ein Div Container befüllt werden.

Hierfür habe ich ein simples Formular erstellt:

HTML Code

<form method="post" enctype="multipart/form-data" onsubmit="storeFile('Hallo Welt')">
<input type="file" name="datei"/><br/>
<input type="submit" value="Hochladen"/>
</form>
<div id="Ergebnis"></div>

anm.: 'Hallo Welt' dient nur zum Testen, ob die POST Daten überhaupt übergeben werden.

normalerweise würde ich mit this.value arbeiten. - Es sei denn, das funktioniert so nicht.

Mein AJAX habe ich als externe Datei eingebunden. Hier die Funktion:

JavaScript Code

function storeFile(str)
{
var xmlhttp = false;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 function rueckgabe()
{
if (xmlhttp.readyState == 4)
{
var d = document.getElementById("Ergebnis");
d.innerHTML += xmlhttp.responseText;
}
}
xmlhttp.open("POST","upload.php", true);
xmlhttp.onReadystatechange = rueckgabe;
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlhttp.send('a='+str);
}

Die upload.php übernimmt den Upload der Datei und den Eintrag in die Datenbank. Hier funktioniert alles, wie es soll (zumindest, wenn ich AJAX außen vor lasse

)
Da ich die Uploadfunktion auskommentiert habe, hat sie auch nur eine Zeile Code damit ich einen Rückgabewert erhalte:

	PHP Quellcode
1 2 3	<?php print $_POST['a']; ?>

Ich hoffe, das ich irgendwie nur zu verwirrt denke, was mein Problem betrifft.
Die vielfach vorgeschlagene Lösung über nen iFrame möchte ich ungern machen.
Aber es kann doch nicht so schwer sein, ein paar POST Variablen zu übergeben... oder?

Danke im Voraus
Pandemonium

Torben Brodt

Administrator

Posts: 8,454

Tuesday, January 11th 2011, 8:37pm

Hi, ein Upload via AJAX ist nicht möglich.
Der Trick ist den Upload an einen versteckten Iframe zu schicken und via AJAX den Status des Uploads zu monitorn.

Ich habe auch ein konkretes Tutorial dafür erstellt: Upload Fortschritt mit PHP + AJAX