Hallo!
Ich habe ein Formular erstellt, das nur den vFU enthält. Im Backend wird der vFU angezeigt:
Screenshot1.png
Im Frontend ist er dagegen "unsichtbar", lediglich der "Senden"-Button wird angezeigt:
Screenshot2.png
Der Code im FE sieht folgendermaßen aus:
Code:
<article class="mod_article block" id="bewerbungsformular">
<h2>Bewerbungsformular</h2>
<!-- indexer::stop -->
<div class="ce_form tableform block">
<form action="de/unternehmen/karriere/bewerbungsformular" id="f56" method="post" enctype="multipart/form-data">
<div class="formbody">
<input type="hidden" name="FORM_SUBMIT" value="auto_form_56">
<input type="hidden" name="REQUEST_TOKEN" value="f0a4e45ee4bfd9ef5fad19ebc748d1ed">
<input type="hidden" name="MAX_FILE_SIZE" value="10485760">
<table>
<tbody><tr class="row_0 row_first even">
<td class="col_0 col_first">
<div id="file-uploader-658" class=" block">
<noscript>
<div><input type="file" name="neue_Dateien" id="ctrl_658" class="upload" /></div>
</noscript>
</div>
<input type="submit" id="ctrl_658_submit" class="submit" value="Senden"> </td>
<td class="col_1 col_last"></td>
</tr>
<script type="text/javascript">
function createUploader(vfu){
var uploader = new qq.FileUploader({
element: document.getElementById('file-uploader-658'),
action: 'ajax.php',
params: {action: 'ffl', id: '658', type:'valumsFileUploader'},
allowedExtensions: ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'doc', 'xls', 'ppt'],
debug: false,
sizeLimit: "",
template: '<div class="qq-uploader">' +
'<div class="qq-upload-drop-area"><span>Zum Hochladen die Datei in dieses Feld ziehen<\/span><\/div>' +
'<div class="qq-upload-button">Datei hochladen<\/div>' +
'<ul class="qq-upload-list"><\/ul>' +
'<\/div>',
fileTemplate: '<li>' +
'<span class="qq-upload-file"><\/span>' +
'<span class="qq-upload-spinner"><\/span>' +
'<span class="qq-upload-size"><\/span>' +
'<a class="qq-upload-cancel" href="#">Abbrechen<\/a>' +
'<span class="qq-upload-text"><\/span>' +
'<\/li>',
messages: {
typeError: "{file} ist ein nicht erlaubter Dateityp. Nur die Dateitypen {extensions} sind erlaubt.",
sizeError: "{file} ist zu groß, die maximal erlaubte Dateigröße ist {sizeLimit}.",
minSizeError: "{file} ist zu klein, die minimal erlaubte Dateigröße ist {minSizeLimit}.",
emptyError: "{file} ist leer, bitte wählen Sie diese Datei nicht mehr aus.",
onLeave: "Die Daten werden hochgeladen, wenn Sie die Seite jetzt verlassen wird der Prozess abgebrochen."
},
onComplete: function(id, fileName, responseJSON){
vfu.setId(id);
vfu.setfileName(fileName);
vfu.setResponseJSON(responseJSON);
vfu.run(id, fileName, responseJSON);
}
});
}
window.addEvent('domready', function(){
var vfu = new ValumsFileUploader({
'action' : 'ajax.php',
'actionParam' : 'ffl',
'fflId' : '658',
'fflIdName' : 'file-uploader-658',
'failureMassage' : 'Fehlgeschlagen',
'detailsFailureMessage' : false,
'allowDelete' : false,
'reloadList' : $('vfu_reload')
});
createUploader(vfu);
});
</script></tbody></table>
</div>
</form>
</div>
<!-- indexer::continue -->
</article>
Das Problem tritt sowohl im Firefox als auch im Chrome/Chromium auf.
Ich vermute ein CSS-Problem oder einen Konflikt mit einem anderen Plugin. Ich finde aber keine konkreten Hinweise, woran es liegen könnte.
Weiß jemand Rat?