Contact 7 Upload Progressbar

Ritsuka

Hallo gibt es eine möglichkeit bei Contact 7 eine Art Prozentanzeige des Uploads einzubauen?

Das hier habe ich schon probiert allerdings wird mir beim Upload nichts angezeigt..

http://www.wordpress.org/support/topic/…-on-submit-form

Wenn jemand eine Idee hat oder mir weiterhelfen kann wäre ich sehr dankbar.

MfG

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

formateins

Klar.

jQuery-Beispiel:

Code

$(function() {




var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');




$('form').ajaxForm({
    beforeSend: function() {
        status.empty();
        var percentVal = '0%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal)
        percent.html(percentVal);
    },
    complete: function(xhr) {
        status.html(xhr.responseText);
    }
});

Alles anzeigen

Bar & Status:

Code

<div class="progress">
    <div class="bar"></div >
    <div class="percent">0%</div >
</div>




<div id="status"></div>

Rest ist CSS... ;)

PS: [FONT=courier new] enctype="multipart/form-data" [/FONT]nicht vergessen... :)

PPS: Weiterführend: http://jqueryui.com/progressbar/

Ritsuka

Danke kannst du mir noch ca sagen wie ich dies einbinden kann?
Da ich selber noch nicht ganz so fit bin was das Programmieren angeht..das wäre nett.

Das hier kommt in classes.php soweit ich weiß..

Zitat

<div class="progress"> <div class="bar"></div > <div class="percent">0%</div > </div> <div id="status"></div>

Da hört es dann fast schon auf xD
Ich bin nicht so bewandert mit JS.

formateins

Wie man eine jQuery-Funktion einbindet, findet sich auf der jQuery-Webseite.

Und den HTML-Code kannst Du so unter das Upload-Feld in CF7 einsetzen.

Google ist Dein Freund und ein wenig Weiterbildung schadet nicht!

Ansonsten frag einfach in der Jobbörse nach - gibt sicher jemanden, der das mal fix für 20 Euronen reinfummelt... :)

Ritsuka

Hm es klappt bei mir nicht ich hab es mal in die Jobbörse gestellt =/

Ritsuka

So ich habe es nochmals versucht ..

script.js habe ich folgendet nach:

Zitat

$(function() {

Eingefügt:

Zitat

var bar = $('.bar');
var percent = $('.percent');
var status = $('#status');

$('form').ajaxForm({
beforeSend: function() {
status.empty();
var percentVal = '0%';
bar.width(percentVal)
percent.html(percentVal);
},
uploadProgress: function(event, position, total, percentComplete) {
var percentVal = percentComplete + '%';
bar.width(percentVal)
percent.html(percentVal);
},
complete: function(xhr) {
status.html(xhr.responseText);
}
});

Alles anzeigen

In classes.php habe ich folgendes nach

Zitat

$form .= '</form>';

Eingefügt:

Zitat

$form .= '<div class="progress">
<div class="bar"></div >
<div class="percent">0%</div >
</div>

<div id="status"></div>';

Es erscheint ein 0% unten im Form wenn ich Uploade passiert aber nichts..

Willkommen! Melden Sie sich an oder registrieren Sie sich.

Contact 7 Upload Progressbar

Jetzt mitmachen!