Für jedes 'file' eine seperate Upload-Progressbar.

Bienchen · 22. Juli 2017

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

<?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&ouml;&szlig;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

<?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&ouml;&szlig;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&ouml;&szlig;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

Sempervivum · 22. Juli 2017

Wenn ich das richtig sehe, brauchst Du nur die Variable client ebenfalls spezifisch für jeden Upload anzulegen, dann sollte es funktionieren.

In einem weiteren Schritt könntest Du dann die Daten in einem Array ablegen und die ganzen Vorgänge in einer Schleife bearbeiten, dann musst Du Variablen und Funktionen nicht vervielfachen. Besonders eine Erweiterung auf mehr Uploads wäre dann einfacher.

Bienchen · 22. Juli 2017

Hi.

Danke für deine Antwort und Idee.

Auf client wäre ich nicht gekommen, die var hab ich beim überlegen ganz ausser acht gelassen *duck*

Ich denk das ganze nochmal durch in der Beziehung und probiere ggf das eine und andere.

Wegen der Arrays - das kommt dann später, wenn Strukturen und funktionen klar sind.

(Da hab ich dann nochmal zu kämpfen, mit arrays steh ich teilweise auch auf kriegsfuss, muss da auch noch etwas praxisbezogen "nachlernen" )

Bienchen · 22. Juli 2017

Sorry, ich hab einiges durchprobiert / experimentiert, bekomme es aber nicht hin.

(Ich hab auch mitbekommen, ich hab hier die falsche Bastelversion vom script gepostet, sorry.)

Hier ist nochmal, die richtige Version:

PHP

<?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&ouml;&szlig;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&ouml;&szlig;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(eA) { document.getElementById("prozentA").innerHTML = "100%"; progA.value = progA.max; };
  client.onload = function(eB) { document.getElementById("prozentB").innerHTML = "100%"; progB.value = progB.max; };

  client.upload.onprogress = function(eA)
  {
    var pA = Math.round(100 / eA.total * eA.loaded);
    document.getElementById("progressA").value = pA;
    document.getElementById("prozentA").innerHTML = pA + "%";
  };

  client.upload.onprogress = function(eB)
  {
    var pB = Math.round(100 / eB.total * eB.loaded);
    document.getElementById("progressB").value = pB;
    document.getElementById("prozentB").innerHTML = pB + "%";
  };

  client.onabort = function(e) { alert("Upload abgebrochen"); };
  client.open("POST", "index6.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

Wenn ich die var client einfach in clientA und clientB Bereiche aufsplitte funktioniert es leider nicht. Bin noch am grübeln wegen var formData, aber die muss ich eigendlich nicht splitten, wäre auch problematisch. (ausser ich gebe jedem upload ein seperaten script z.bsp. in nem iframe, das wäre aber relativ unübersichtlich und verkompliziert.

Hast Du da einen noch etwas genaueren Plan?

(das script hier hab ich mal als index6.php eingestellt)

Auch gerne gemeinsam via ICQ oder Skype-Text-Chat

Sempervivum · 22. Juli 2017

Da sträuben sich mir die Nackenhaare so etwas durch Verdoppeln der Funktionen zu machen, aber weil Du schreibst, dass die Schleifen später kommen, habe ich es mal so gemacht.

HTML

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Datei-Upload</title>
</head>
<body>
    <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&ouml;&szlig;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&ouml;&szlig;e: ' + file.size + ' B';
            document.getElementById("fileTypeB").innerHTML = 'Dateityp: ' + file.type;
            document.getElementById("progressB").value = 0;
            document.getElementById("prozentB").innerHTML = "0%";
        }
        var clientA = null, clientB = null;
        function uploadFiles() {
            var fileA = document.getElementById("fileA").files[0];
            var fileB = document.getElementById("fileB").files[0];
            var formData = new FormData();
            var progA = document.getElementById("progressA");
            var progB = document.getElementById("progressB");
            function onerror(e) {
                alert("errror!");
            }
            function onloadA(e) {
                document.getElementById("prozentA").innerHTML = "100%";
                progA.value = progA.max;
            }
            function onloadB(e) {
                document.getElementById("prozentB").innerHTML = "100%";
                progB.value = progB.max;
            }
            function onprogressA(e) {
                var p = Math.round(100 / e.total * e.loaded);
                document.getElementById("progressA").value = p;
                document.getElementById("prozentA").innerHTML = p + "%";
            };
            function onprogressB(e) {
                var p = Math.round(100 / e.total * e.loaded);
                document.getElementById("progressB").value = p;
                document.getElementById("prozentB").innerHTML = p + "%";
            };
            if (fileA) {
                progA.value = 0;
                progA.max = 100;
                formData.append("dateiA", fileA);
                clientA = new XMLHttpRequest();
                clientA.onerror = onerror;
                clientA.onload = onloadA;
                clientA.upload.onprogress = onprogressA;
                clientA.onabort = function (e) { alert("Upload abgebrochen"); };
                clientA.open("POST", "upload2.php");
                clientA.send(formData);
            }
            if (fileB) {
                progB.value = 0;
                progB.max = 100;
                formData.append("dateiB", fileB);
                clientB = new XMLHttpRequest();
                clientB.onerror = onerror;
                clientB.onload = onloadB;
                clientB.upload.onprogress = onprogressB;
                clientB.onabort = function (e) { alert("Upload abgebrochen"); };
                clientB.open("POST", "upload2.php");
                clientB.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>

Alles anzeigen

upload2.php:

PHP

<?php
if (isset($_FILES['dateiA'])) {
    move_uploaded_file($_FILES['dateiA']['tmp_name'], 'uploads/'.basename($_FILES['dateiA']['name']));
}
if (isset($_FILES['dateiB'])) {
    move_uploaded_file($_FILES['dateiB']['tmp_name'], 'uploads/'.basename($_FILES['dateiB']['name']));
}
?>

Bienchen · 22. Juli 2017

Hi.

Ersteinmal Danke für deine Vorschläge / Modifikationen.

Sieht etwas andersaus. Beim drüberschauen ist mir aufgefallen, daß Du das Script schon etwas optimaler strukturiert hast, als meins war, um die Schleifen besser bauen zu können. Ein dickes Danke dafür.

Ich werde mich da morgen noch einmal intensiver dransetzen, alles durchgehen und testen.

Natürlich ist das auch gut für mich, um etwas mehr aus dem Bereich JavaScript zu lernen.

Für jedes 'file' eine seperate Upload-Progressbar.

Jetzt mitmachen!

Teilen

Tags