Hi.
Vorab:
Ich kann etwas (mehr oder weinger ^^) HTML, CSS, PHP, SQL.
Aber mit JS hab ich mich nie wirklich beschäftigt.
Ich habe ein kleines Uploadscript für single-files , mit progressbar.
Dieses möchte ich zum multi-upload ändern, mit einer Progressbar je Datei.
... (Ja, das Uploadscript ist aus einem Script-Beispiel von einer anderen Internetseite, modifiziert.)
<?php
echo" <!doctype html><html><head><meta charset=\"utf-8\"><title>Datei-Upload</title></head><body>";
if ($_GET["ups"]!="") { print("upload erfolgreich<br>"); }
?>
<script type="text/javascript">
function fileChange() {
var fileList = document.getElementById("fileA").files;
var file = fileList[0];
if(!file)
return;
document.getElementById("fileName").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSize").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("fileType").innerHTML = 'Dateityp: ' + file.type;
document.getElementById("progress").value = 0;
document.getElementById("prozent").innerHTML = "0%";
}
var client = null;
function uploadFile() {
var file = document.getElementById("fileA").files[0];
var formData = new FormData();
client = new XMLHttpRequest();
var prog = document.getElementById("progress");
if(!file)
return;
prog.value = 0;
prog.max = 100;
formData.append("datei", 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 + "%";
if (p == 100) { alert('Upload erledigt.'); window.location.href='http://www.adresse.tld/index2.php?ups=1'; }
};
client.onabort = function(e) { alert("Upload abgebrochen"); };
client.open("POST", "index2.php");
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" 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"></progress> <span id="prozent"></span>
</div>
</body>
</html>
<?php
if (isset($_FILES['datei'])) {
move_uploaded_file($_FILES['datei']['tmp_name'], 'h5up/'.basename($_FILES['datei']['name']));
}
?>
Alles anzeigen
Den Multiupload dazu habe ich hinbekommen, aber nicht die progressbars, es geht immer nur eine.
Das hatte ich mir an der stelle zu einfach vorgestellt, funktionen duplizieren, variablen der einzelnen dateien einfach mit einem angehängten Zähler ala "$i=0; ... i++", so wie ich es kenne ... Das geht hier aber leider nicht.
Ich bin bisher soweit, dass ich die gesamte Datenmenge in einer Progressbar darstellen kann, aber ebend nicht, wie ich es ursprünglich wollte, eine Progressbar je 'file'.
Ich muss dazu noch anmerken, dass ich hierbei gemerkt habe, dass ich von js-grammatik keine , und von js struktur nicht all zu viel ahnung habe. Strukturen , Variablen, Funktionen und co kenne ich nur aus dem PHP heraus. Ist ja teilweise ähnlich.
- Hier der Link zur Test-Seite mit dem Problem:
http://www.downloadarchiv.org:2288/index4.php
- Das Script in dieser Version:
<?php
echo" <!doctype html><html><head><meta charset=\"utf-8\"><title>Datei-Upload</title></head><body>";
// if ($_GET["ups"]!="") { print("upload erfolgreich<br>"); }
?>
<script type="text/javascript">
function fileChangeA() {
var fileList = document.getElementById("fileA").files;
var file = fileList[0];
if(!file)
return;
document.getElementById("fileNameA").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSizeA").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("fileTypeA").innerHTML = 'Dateityp: ' + file.type;
document.getElementById("progressA").value = 0;
document.getElementById("prozentA").innerHTML = "0%";
}
function fileChangeB() {
var fileList = document.getElementById("fileB").files;
var file = fileList[0];
if(!file)
return;
document.getElementById("fileNameB").innerHTML = 'Dateiname: ' + file.name;
document.getElementById("fileSizeB").innerHTML = 'Dateigröße: ' + file.size + ' B';
document.getElementById("fileTypeB").innerHTML = 'Dateityp: ' + file.type;
document.getElementById("progressB").value = 0;
document.getElementById("prozentB").innerHTML = "0%";
}
var client = null;
function uploadFiles() {
var fileA = document.getElementById("fileA").files[0];
var fileB = document.getElementById("fileB").files[0];
var formData = new FormData();
client = new XMLHttpRequest();
var progA = document.getElementById("progressA");
var progB = document.getElementById("progressB");
if((!fileA)&&(!fileB))
return;
progA.value = 0;
progA.max = 100;
formData.append("dateiA", fileA);
progB.value = 0;
progB.max = 100;
formData.append("dateiB", fileB);
client.onerror = function(eB) { alert("onError"); };
client.onload = function(eB)
{
document.getElementById("prozentA").innerHTML = "100%"; progA.value = progA.max;
document.getElementById("prozentB").innerHTML = "100%"; progB.value = progB.max;
};
client.upload.onprogress = function(eB)
{
var pB = Math.round(100 / eB.total * eB.loaded);
document.getElementById("progressB").value = pB;
document.getElementById("prozentB").innerHTML = pB + "%";
// if ((pA && pB) == 100) { alert('Upload erledigt.'); window.location.href='http://www.downloadarchiv.org:2288/index4.php?ups=1'; }
};
client.onabort = function(e) { alert("Upload abgebrochen"); };
client.open("POST", "index4.php");
client.send(formData);
}
function uploadAbort() {
if(client instanceof XMLHttpRequest)
client.abort();
}
</script>
<form action="" method="post" enctype="multipart/form-data">
<input name="fileA" type="file" id="fileA" onchange="fileChangeA();"/>
<div>
<div id="fileNameA"></div>
<div id="fileSizeA"></div>
<div id="fileTypeA"></div>
<progress id="progressA" style="margin-top:10px"></progress> <span id="prozentA"></span>
</div>
<input name="fileB" type="file" id="fileB" onchange="fileChangeB();"/>
<div>
<div id="fileNameB"></div>
<div id="fileSizeB"></div>
<div id="fileTypeB"></div>
<progress id="progressB" style="margin-top:10px"></progress> <span id="prozentB"></span>
</div>
<input name="upload" value="Upload" type="button" onclick="uploadFiles();" />
<input name="abort" value="Abbrechen" type="button" onclick="uploadAbort();" />
</form>
</body>
</html>
<?php
if (isset($_FILES['dateiA'])) {
move_uploaded_file($_FILES['dateiA']['tmp_name'], 'h5up/'.basename($_FILES['dateiA']['name']));
}
if (isset($_FILES['dateiB'])) {
move_uploaded_file($_FILES['dateiB']['tmp_name'], 'h5up/'.basename($_FILES['dateiB']['name']));
}
?>
Alles anzeigen