PHP Improvisierten Ladebalken in php realisieren?

dynamic_gamer · 2. Juli 2012

Hallo,

ich habe ein php script geschrieben,mit dem der Nutzer Dateien auf einen Server laden kann. Also z.bsp. .jpg, .txt usw. Klappt auch alles. Allerdings habe ich keinen Ladebalken hinbekommen. Der Nutzer klickt also auf senden und erhält dann eine entsprechende Erfolgs-oder Errormeldung über den Upload. Dazwischen sieht er allerdings nichts. Das führt dazu,dass viele Nutzer ixmal auf den Senden Button klicken, weil sie denken es passiert nichts.

Wie könnte ich da einen Ladebalken realisieren. Weg von einem korrekten Auslesen. Das dürfte mit php kaum zu realisieren sein. Mir würde es genügen,dass nach dem senden ein einfaches .gif dargestellt wird. Einfach nur damit der Nutzer sieht es passiert was. Direkt in der If Else Struktur. Direkt nach dem submit und bevor die gesendete Datei gecheckt und dann hochgeladen wird. Wie kann ich da eine grafik anzeigen lassen. Jemand ne Idee?

Yuuri · 2. Juli 2012

Sieh dir JavaScript an, PHP ist rein serverseitig.

kling1 · 2. Juli 2012

hier ein beispiel wie du zumindest an den aktuellen upload fortscghritt kommst etc.
http://blog.new-bamboo.co.uk/2010/07/30/html5-powered-ajax-file-uploads
https://github.com/newbamboo/example-ajax-upload/blob/master/public/index.html

funktioniert allerdings nicht im ie.. da muss man für einen "ajax" upload mit iframes rumtricksen

dynamic_gamer · 2. Juli 2012

Sieh dir JavaScript an, PHP ist rein serverseitig

Ja klar. Darum ja auch der Gedanke weg von der korrekten Umsetzung hin zu nem kleinen Fake Trick. Es muss doch möglich sein, nach dem senden,dem Klick des Nutzers, eine Grafik einzublenden. Ein gif was einmal ne Ladeanimation zeigt. Es geht doch nur darum das der Nutzer sieht das was passiert.

Yuuri · 2. Juli 2012

Und wo ist da nun das Problem? Blende doch einfach mit JavaScript (jQuery/prototype/... vielleicht?) eine Animation/Grafik an entsprechender Stelle ein.

redasurc · 2. Juli 2012

Dann sagst du es ja schon selbst: ein animiertes .gif

Omega4 · 2. Juli 2012

Ja nimm ein animiertes GIF und disable den "Senden" Button bis zum Abschluss des Uploads.

kling1 · 2. Juli 2012

wenns nur um eine animation geht und nicht unbeding einen fortschittsbalken kansnt du es praktisch so machen, dass du als target deines form ein iframe benutzt.. beim submit rufst du eine javascript funktion auf die das file input etc. ausblendetg und eine grafik einblendet.. dein upload script das im iframe läuft, ruft nach dem upload eine javascript funktion vom parent auf.. das die animation wieder ausblendet und erflogs oder fehlertext anzeigt

so eben kleines script zusammen geschrieben
das wäre dann deine upload.html oder wie auch immer

HTML:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
function startUpload() {
$('#upload').hide();
$('#submit-button').hide();
$('#upload-img').show();
}

function stopUpload(status) {
$('#upload-img').hide();
var text = 'upload erfolgreich';
if (status > 0) {
text = 'fehler beim upload';
}
$('#message').text(text);
$('#message').show();
}
</script>
</head>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_frame" onsubmit="startUpload()">
<iframe style="display: none" name="upload_target" src="#"></iframe>
<label for="upload">dateiasuwahl</label>
<input type="file" name="upload" id="upload"/>
<img src="http://www.kuka-robotics.com/res/icn/ajax_loader.gif" id="upload-img" style="display:none"/>
<span id="message" style="display: none"></span>
<input type="submit" id="submit-button" value="start"/>
</form>
</body>
</html>

und das die upload.php

PHP:

<?php
$path = 'upload/';
move_uploaded_file($_FILES['upload']['tmp_name'], $path);
?>
<script language="javascript" type="text/javascript">
    window.top.window.stopUpload(<?php echo $_FILES['upload']['error']; ?>);
</script>

hab das jetzt einfach blind ohne die möglichkeit zum testen geschrieben.. hoffe es geht.. es findet auch keine großartige validierung statt

Daaron · 2. Juli 2012

Wirf mal n Blick hierrauf:
http://valums.com/ajax-upload/

Ich find das Ding göttlich.

Yuuri · 2. Juli 2012

@ Daaron: Kann ich nur bestätigen. Hab es letztens selbst verbaut.

dynamic_gamer · 2. Juli 2012

@klomann83 gute Idee.

Ich hab mal folgendes probiert:

<a href="ladeanimation.gif" target="animation" title="Senden"><input type="image" src="upload_button.png" border="0" value=" hochladen " /></a><br /><iframe name="animation" width="50" height="50"></iframe>

Bei klick soll er also die animation im iframe anzeigen. Im reinen html gehts, in der php aber nicht...obwohl alles andere funktioniert und er auch den title aus dem anker weitergibt...komisch....aber so könnte es gehen...jemand ne idee?

character · 2. Juli 2012

Das sind viel zu wenige Infos um dir zu helfen. Wo ist das form-Tag?

Crys · 2. Juli 2012

Per php kannst du es nur so realisieren, dass wenn man einen download startet, dieser in einen anderen Fenster/Tab geöffnet wird. Die eigentliche Seite leitest du auf ne andere Seite um (per header()), auf der ein Ladebalken läuft. Kann ja ne x-beliebige aGif sein.

kling1 · 2. Juli 2012

der code den da gepostzet habe funktioniert wenn man 2 steleln ändert.. konnte erst jetzt testen
hab leider paar unachtseimkeits fehler gemacht
das form tag müsste so aussehen

HTML:

<form action="upload.php" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload()">

und im php fehlt naturlich die angebe des entgültigen dateinamens also so

PHP:

move_uploaded_file($_FILES['upload']['tmp_name'], $path . $_FILES['upload']['name']);

sonst hast du da ein fertiges und funktioniertes script auf dem du aufbauen kannst

BuzzGo · 2. Juli 2012

Neben dem fehlenden Code-Schnipsel mal am Rande gefragt:

Welchen Dokumententyp und Beschreibung verwendest Du?

Das geht aus dem HTML-Code nicht wirklich hervor. Du verwendest zwar <br /> was schon fast auf XHTML Strict schließen lässt, jedoch benutzt Du auch <iframe> statt <object>. Das wiederum sprich für höchstens XHTML Transitional.

Warum überhaupt per iframe und nicht per DIV welches entweder per JS generiert wird oder bereits auf der Seite plaziert und die Sichtbarkeit entsprechend gesteuert wird?

Netten Gruß
Ben

Suche

PHP Improvisierten Ladebalken in php realisieren?

dynamic_gamer

Ensign

Yuuri

Fleet Admiral

kling1

Gast

dynamic_gamer

Ensign

Yuuri

Fleet Admiral

redasurc

Lieutenant

Omega4

Lieutenant

kling1

Gast

Daaron

Fleet Admiral

Yuuri

Fleet Admiral

dynamic_gamer

Ensign

character

Lt. Commander

Crys

Lt. Commander

kling1

Gast

BuzzGo

Lieutenant

Ähnliche Themen