Joa, dann versuche ich das mal...
Ich habe mittlerweile an dem Teil einige eigene Einstellungen und Anpassungen vorgenommen. Von daher könnte mein Code etwas vom Original abweichen, sollte aber als Grundlage und Hilfestellung bestimmt helfen.
Ich habe das Teil einfach mittels Formulargenerator eingebaut.
Da ich gerne mit so wenigen Seitentemplates (z.B. fe_page.html5) wie möglich arbeite, frage ich im Seitentemplate erstmal die Seiten-ID ab und binde dann meine Scripte ein:
PHP-Code:
<?php
global $objPage;
$pageId = $objPage->id;
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- Angenommen die Seiten-ID mit dem Uploadformular ist 10 -->
<?php if ($pageId == 10): echo "\n" //Datenupload ?>
<link rel="stylesheet" href="files/css/uploads.css" media="screen">
<script src="files/js/jquery.uploadfile.min.js"></script>
<script src="files/js/jquery.uploadfile.settings.js"></script>
<?php endif; ?>
Der Schnipsel mit 'jquery.min.js' steht mal zur Vollständigkeit hier drin. jQuery sollte natürlich über das Contao-Backend ins Seitentemplate eingebunden werden.
-----------------------
Irgendwohin sollen die Daten hochgeladen werden, also
Uploadordner anlegen, z.B. hier files/uploads
.htaccess in den Uploadordner, mit folgendem Inhalt:
Code:
<IfModule !mod_authz_core.c>
Order deny,allow
Deny from all
</IfModule>
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
Options -ExecCGI -Indexes
-----------------------
Im Contao-Backend:
Dankeseite anlegen.
Im Formulargenerator "Neues Formular" anlegen und soeben angelegte Dankeseite als 'Weiterleitungsseite' auswählen, ID namens 'dataform' zuweisen (wird später für jquery benötigt).
Im Formulargenerator alle Felder wie gehabt anlegen.
Keinen Absendebutton anlegen.
Dazu folgende Elemente:
Feldtyp: Textfeld
Feldname: filenames
Feldbezeichnung: Upload-Dateien
CSS-Klasse: filenames
Feldtyp: HTML
HTML-Code: <div id="fileuploader">Datei(en) wählen</div>
Das hier wird der Absende- und Upload-Button
Feldtyp: HTML
HTML-Code: <input type="submit" id="startUpload" class="submit" value="Upload starten">
-----------------------
Original-Uploadscript z.B. hier anlegen: /pfad/zum/uploaderverzeichnis/upload.php
und
output_dir zum eben angelegten Uploadverzeichnis anpassen:
PHP-Code:
$output_dir = "../../../files/uploads/";
//[...]
-----------------------
Hier kommt ein Auszug des Inhaltes meiner 'jquery.uploadfile.settings.js'.
Weitere Funktionen und Anpassungen können hier leicht integriert werden. Das Tool ist sehr gut dokumentiert.
Wichtigste Funktion ist hier, dass nach erfolgtem Upload ein automatischer Submit des Formulares erfolgt. Nachdem also der Upload erfolgt ist, gelangt der User zur vorhin angelegten Dankeseite.
Code:
$(document).ready(function()
{
var uploadObj = $("#fileuploader").uploadFile({
url:"./pfad/zur/upload.php",
fileName:"myfile",
autoSubmit:false,
showDelete: false,
fileCounterStyle:". Datei: ",
dragDropStr: "<span><b>Sie können Ihre Dateien auch in dieses Fenster ziehen (Drag & Drop).</b></span>",
abortStr:"abbrechen",
cancelStr:"Auswahl entfernen",
doneStr:"fertig",
allowedTypes:"jpg,jpeg,png,gif,doc,txt,pdf,psd,tif,tiff,eps,zip,rar",
extErrorStr:"ist keine zugelassene Datei. Zulässige Dateiformate sind: ",
maxFileSize: 1024*1024*500, //1024 = 1kb, 1048576 = 1024*1024= 1MB
maxFileCount: 20,
sizeErrorStr:"überschreitet die max. zulässige Dateigröße von ",
// hier die restlichen gewünschten Parameter rein -> Am Ende immer ein Komma ,
onSuccess:function(files,data,xhr) {
var inputfilenames = '#dataform .filenames'; // ID,classname of input collecting filenames
if ( $(inputfilenames).val() == '' ) {
$(inputfilenames).val(data+',');
} else {
if ( $(inputfilenames).val().indexOf(data) === -1 ) {
$(inputfilenames).val( $(inputfilenames).val() + ',' + data);
}
}
},
afterUploadAll:function(obj)
{
var inputfilenames = '#dataform .filenames'; // ID,classname of input collecting filenames
$(inputfilenames).val( $(inputfilenames).val().replace(',', '') );
$(inputfilenames).val( $(inputfilenames).val().replace(/,/g,", ") );
// Kleiner Timeout und automatisches Absenden nach erfolgtem Upload
window.setTimeout('document.forms["dataform"].submit();', 1000);
}
})
$('#dataform').on('submit', function(e) {
e.preventDefault();
$(":input[required]").each(function () {
var myForm = $('#dataform');
var isValid = null;
if (myForm[0].checkValidity())
{
isVAlid = 1;
}
});
if (isVAlid==1) {
uploadObj.startUpload();
}
});
});
Dann mal viel Erfolgt beim Nachbasteln!
Viele Grüße,
Andy
Lesezeichen