Для CMS, которую я создаю, мне нужно несколько загрузчиков, один для файлов, другой для изображений, позже можно добавить один для видео и т. Д.
У меня все работает, javascript построен частично динамически, поэтому мне нужно только передать тип в мой PHP-скрипт. Мой PHP будет генерировать следующий код:
function createImageUploader(){
var fileType = 'image';
var uniqueId = '4f2c1e5d42276';
var Imageuploader = new qq.FileUploaderBasic({
element: document.getElementById('image-uploader'),
button: document.getElementById(fileType + '-upload-button'),
action: '/admin/media/upload/' + uniqueId + '/' + fileType,
debug: true,
multiple: true,
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){
},
onComplete: function(id, fileName, responseJSON){
$('#' + fileType + '-upload-container').append('<li id="' + fileType + '-' + responseJSON.data.Medium.id + '"><div class="thumbnail"> <a href="#"><img class="thumbnail" src="" /></a> <div class="caption"> <div class="btn-group"> <a href="#" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i> Opties <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="js-delete-image" ><i class="icon-trash"></i> Verwijderen</a></li> <li><a href="#" data-img=""><i class="icon-eye-open"></i> Bekijken</a></li> </ul> </div> </div> </div></li>')
$('#' + fileType + '-' + responseJSON.data.Medium.id + ' img').attr('src', '/image/admin/' + responseJSON.data.Medium.src);
$('#' + fileType + '-' + responseJSON.data.Medium.id + ' .js-delete-image').attr('data-id', responseJSON.data.Medium.id);
},
onCancel: function(id, fileName){
},
template: '<div class="uploader"> <ul class="image-upload-list"></ul> <div class="image-upload-drop-area"><span>Sleep hier je bestanden om te starten.</span></div> <div class="btn image-upload-button">Afbeeldingen uploaden</div></div>',
fileTemplate: '<li> <span class="image-upload-file"></span> <span class="image-upload-spinner"></span> <span class="image-upload-size"></span> <a class="image-upload-cancel" href="#">Annuleren</a> <span class="image-upload-failed-text">Niet geslaagd</span></li> ',
classes: {
button: fileType + '-upload-button',
drop: fileType + '-upload-drop-area',
dropActive: fileType + '-upload-drop-area-active',
list: fileType + '-upload-list',
file: fileType + '-upload-file',
spinner: fileType + '-upload-spinner',
size: fileType + '-upload-size',
cancel: fileType + '-upload-cancel',
success: fileType + '-upload-success',
fail: fileType + '-upload-fail'
}
});
}
window.onload = createImageUploader;
Это работает нормально, однако, когда я добавляю секунду - первый перестает работать. Это должно быть что-то маленькое, вероятно, кто-то с большим опытом работы с javascript замечает это быстро. Я разработчик PHP, мои навыки работы с JavaScript все еще ограничены.
Это второй сгенерированный скрипт: последний всегда работает, первый никогда не работает.
<script>
function createFileUploader(){
var fileType = 'file';
var uniqueId = '4f2c1e5d42276';
var Fileuploader = new qq.FileUploaderBasic({
element: document.getElementById('file-uploader'),
button: document.getElementById(fileType + '-upload-button'),
action: '/admin/media/upload/' + uniqueId + '/' + fileType,
debug: true,
multiple: true,
onSubmit: function(id, fileName){},
onProgress: function(id, fileName, loaded, total){
},
onComplete: function(id, fileName, responseJSON){
$('#' + fileType + '-upload-container').append('<li id="' + fileType + '-' + responseJSON.data.Medium.id + '"><div class="thumbnail"> <a href="#"><img class="thumbnail" src="" /></a> <div class="caption"> <div class="btn-group"> <a href="#" class="btn dropdown-toggle" data-toggle="dropdown"><i class="icon-cog"></i> Opties <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#" class="js-delete-image" ><i class="icon-trash"></i> Verwijderen</a></li> <li><a href="#" data-img=""><i class="icon-eye-open"></i> Bekijken</a></li> </ul> </div> </div> </div></li>')
$('#' + fileType + '-' + responseJSON.data.Medium.id + ' img').attr('src', '/image/admin/' + responseJSON.data.Medium.src);
$('#' + fileType + '-' + responseJSON.data.Medium.id + ' .js-delete-image').attr('data-id', responseJSON.data.Medium.id);
},
onCancel: function(id, fileName){
},
template: '<div class="uploader"> <ul class="file-upload-list"></ul> <div class="file-upload-drop-area"><span>Sleep hier je bestanden om te starten.</span></div> <div class="btn file-upload-button">Afbeeldingen uploaden</div></div>',
fileTemplate: '<li> <span class="file-upload-file"></span> <span class="file-upload-spinner"></span> <span class="file-upload-size"></span> <a class="file-upload-cancel" href="#">Annuleren</a> <span class="file-upload-failed-text">Niet geslaagd</span></li> ',
classes: {
button: fileType + '-upload-button',
drop: fileType + '-upload-drop-area',
dropActive: fileType + '-upload-drop-area-active',
list: fileType + '-upload-list',
file: fileType + '-upload-file',
spinner: fileType + '-upload-spinner',
size: fileType + '-upload-size',
cancel: fileType + '-upload-cancel',
success: fileType + '-upload-success',
fail: fileType + '-upload-fail'
}
});
}
window.onload = createFileUploader;
</script>
Не обращайте слишком много внимания на html в коде, он включен там с PHP и не нарушает скрипт.