qqFileuploader多個實例，只有最後的工作

Question

對於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中，不會破壞腳本。

Answer 1

您很可能需要不同的uniqueId在第二個。