Hi,
ich hab im Internet dieses schöne Skript gefunden um bei einem Upload eine Progress Bar zu haben.
Das Problem:
Ich bin ein absoluter javascript-Legasteniker. Ich habs dennoch zum laufen gebracht. Ich bräuchte es aber auch um mehrere Dateien gleichzeitig hochladen zu können. Könnt ihr mir da helfen, damit ich auch dort meine ganzen Dateien in einer POST Variable verschicken kann und trotzdem die Progress Bar hab?!
Bis jetzt habe ich es so gemacht:
Code
<form name="uploadform" method="post" enctype="multipart/form-data" action="upload.php?folder_id='.$_GET['folder_id'].'" onsubmit="document.images.Load.style.display=\'block\';">
<input size="40" type="file" name="file[]" multiple="multiple" />
<input type="submit" value="Hochladen">
</form>Auf Serverseite verarbeite ich das alles. Funktioniert super, ich hab halt nur keine Progress Bar 
Das nächste ist das oben genante Skript:
PHP
<script type="text/javascript">
function fileChange()
{
//FileList Objekt aus dem Input Element mit der ID "fileA"
var fileList = document.getElementById("fileA").files;
//File Objekt (erstes Element der FileList)
var file = fileList[0];
//File Objekt nicht vorhanden = keine Datei ausgewählt oder vom Browser nicht unterstützt
if(!file)
return;
document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("fileType").innerHTML = 'Dateitype: ' + file.type;
document.getElementById("progress").value = 0;
document.getElementById("prozent").innerHTML = "0%";
}
var client = null;
function uploadFile()
{
//Wieder unser File Objekt
var file = document.getElementById("fileA").files[0];
//FormData Objekt erzeugen
var formData = new FormData();
//XMLHttpRequest Objekt erzeugen
client = new XMLHttpRequest();
var prog = document.getElementById("progress");
if(!file)
return;
prog.value = 0;
prog.max = 100;
//Fügt dem formData Objekt unser File Objekt hinzu
formData.append("file[]", file);
client.onerror = function(e) {
alert("onError");
};
client.onload = function(e) {
document.getElementById("prozent").innerHTML = "100%";
prog.value = prog.max;
};
client.upload.onprogress = function(e) {
var p = Math.round(100 / e.total * e.loaded);
document.getElementById("progress").value = p;
document.getElementById("prozent").innerHTML = p + "%";
};
client.onabort = function(e) {
alert("Upload abgebrochen");
};
client.open("POST", "upload.php?folder_id=<?php echo $_GET['folder_id']; ?>");
client.send(formData);
}
function uploadAbort() {
if(client instanceof XMLHttpRequest)
client.abort();
}
</script>
<form action="" method="post" enctype="multipart/form-data">
<input name="file[]" type="file" multiple="multiple" id="fileA" onchange="fileChange();"/>
<input name="upload" value="Upload" type="button" onclick="uploadFile();" />
<input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" />
</form>
<div>
<div id="fileName"></div>
<div id="fileSize"></div>
<div id="fileType"></div>
<progress id="progress" style="margin-top:10px; color:red;"></progress> <span id="prozent"></span>
</div>So funktioniert es mit einer Datei. Wie schaffe ich es jetzt dass das komplett auch mit mehreren Dateien funktioniert?
Vielen Dank schonmal!
