Dateiupload über jQuery

[Sprint]

Hallo zusammen,

ich bin gerade dabei, eine bestehende Webseite neu aufzubauen. Dazu wird das fertige Template einer responsive Site verwendet. Sämtliche Formulare werden per jQuery verarbeitet und das soll auch so bleiben. Bisher habe ich auch alle Formulare entsprechend anpassen können, jetzt kommt aber das Problem, daß in einem Formular auch ein Fileupload enthalten ist. Und das ist für mich als absolutem jQuery Trottel definitiv zu hoch.

Ich habe zwar eine Lösung gefunden, die aber zum einen über Submit funktioniert (in dem Template werden Formulare per a Tag abgesendet), zum anderen weiß ich auch nicht, wie ich das in das bestehende Scipt einbaue.

Hier ist mal ein Formular in seiner Urform.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/all-in-one.js"></script>
<script type="text/javascript" src="js/setup.js"></script>
<script type="text/javascript" src="js/contact-form.js"></script>

...

<form action="#" class="contact_form">
<p>
	<label for="name">Name <span>*</span></label>
	<input class="inputText" type="text" id="name" name="name" />
</p>
<div class="clear"></div>
<p>
	<label for="email">E-mail <span>*</span></label>
	<input class="inputText" type="text" id="email" name="email" />
</p>
<div class="clear"></div>
<p>
	<label for="website">Website</label>
	<input class="inputText" type="text" id="website" name="website" />
</p>
<div class="clear"></div>
<p>
	<label for="message">Message <span>*</span></label>
	<textarea class="inputTextarea" cols="88" rows="6" id="message" name="message"></textarea>
</p>
<div class="clear"></div>
<p class="submit">
	<a href="javascript:void(0);" class="button white" onclick="$('.contact_form').submit();">Send</a>
</p>
</form>

$(document).ready(function () {

    $('#name').focus(function () {
        $(this).removeClass('error_class');
    });

    $('#email').focus(function () {
        $(this).removeClass('error_class');
    });

    $('#message').focus(function () {
        $(this).removeClass('error_class');
    });

    $('.contact_form').submit(function () {

        hasError = false;

        if ($('#name').val() == '') {
            $('#name').addClass('error_class');
            hasError = true;
        }

        var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;

        var emailaddressVal = $('#email').val();
        if (emailaddressVal == '') {
            $('#email').addClass('error_class');
            hasError = true;
        }
        else if (!emailReg.test(emailaddressVal)) {
            $('#email').addClass('error_class');
            hasError = true;
        }

        if ($('#email').val() == '') {
            $('#email').addClass('error_class');
            hasError = true;
        }

        if ($('#message').val() == '') {
            $('#message').addClass('error_class');
            hasError = true;
        }

        if (hasError == true) {
            $('.info_box').hide();
            $('.error_box').show();
        }
        else {
            $.ajax({
                type: 'POST',
                url: 'contact.php',
                cache: false,
                data: $(".contact_form").serialize(),
                success: function (data) {
                    if (data == "error") {
                        $('.success_box').hide();
                        $('.error_box').show();
                    }
                    else {
                        $('#name').val('');
                        $('#email').val('');
                        $('#message').val('');
                        $('#website').val('');
                        $('.error_box').hide();
                        $('.success_box').show();
                    }
                }
            });
        }

        return false;
    });
});

Die spätere Verarbeitung per PHP ist kein Problem, darum hab ich das hier mal weggelassen.

Kann mir jemand helfen, da einen Dateiupload einzubauen? Falls das bei der Form von Formular überhaupt geht.

Schon mal vielen Dank im Voraus,
Sprint

 

[Jan-Frederik Stieler]

Hi,
nur mal so am Rande, a-Elemente sind für die Verlinkung von Inhalten gedacht und nicht dazu Formulare abzusenden. Das ist syntaktisch einfach falsch.
Deshalb wird in deinem Quellcode auch href="javascript:void(0);" verwendet was nicht notwendig wäre wenn man nicht die falschen „Wörter“ verwenden würde.

Was ich nicht verstehe ist warum du das nicht korrigierst?

Als Uploadplugin kann ich dir das hier ans Herz legen: http://blueimp.github.io/jQuery-File-Upload/basic.html

Ansonsten brauchst du grundsätzlich Ajax um per Javascript Dateien an den Server zu schicken.
http://hayageek.com/ajax-file-upload-jquery/

Grüße

 

[Sprint]

Danke, das Plugin hat mir sehr geholfen.

Wenn es nach mir ginge, hätte ich die Formulare schon umgebaut, aber der Kunde will es so haben wie es jetzt ist. Und ich habe keine Lust und keinen Nerv, mir jQuery auch noch anzutun, um das zu ändern.
Das funktioniert und dann ist es gut so. Und nachdem auch unser SEOler keine Bedenken hatte, bleibt das so.

 

[Jan-Frederik Stieler]

Hi,
nun du müsstest dir kein jQuery antuen sondern PHP oder eine andere Serverseitige Sprache.
Und der Grund wäre aus Zugänglichkeit weniger wegen SEO.
Aber ich kann deinen Bewegrund nichts daran zu ändern nachvollziehen.

Grüße

 

[Sprint]

Ich hätte auch alles auf PHP umgestellt, aber der Kunde möchte gerne die erste Prüfung haben, ohne daß die Seite neu geladen wird. Von daher muß ich erst mal bei einem Formular bleiben, das per JS bzw. jQuery geprüft wird.