Javascript qqFileuploader多个实例，仅最后一个工作实例

对于一个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;

函数createImageUploader（）{
var fileType='image'；
var uniqueId='4f2c1e5d42276'；
var Imageuploader=new qq.fileuploader基本({
元素：document.getElementById（'image-uploader'），
按钮：document.getElementById（文件类型+'-upload按钮'），
操作：'/admin/media/upload/'+uniqueId+'/'+fileType，
是的，
多重：对，
onSubmit:函数（id，文件名）{}，
onProgress:函数（id、文件名、已加载、总计）{
},
onComplete:函数（id、文件名、responseJSON）{
$（“#”+fileType+'-upload container”）.append（“
）
$（'#'+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：函数（id、文件名）{
},
模板：“
睡眠时间越长越好。Afbeeldingen uploaden”，
文件模板：“
Niet geslaagd
”，
课程：{
按钮：文件类型+“-上载按钮”，
删除：文件类型+'-上载删除区域'，
dropActive:fileType+'-上载放置区域处于活动状态'，
列表：文件类型+“-上载列表”，
文件：文件类型+'-上载文件'，
微调器：文件类型+'-上载微调器'，
大小：文件类型+“-上载大小”，
取消：文件类型+'-上载取消'，
成功：文件类型+“-上载成功”，
失败：文件类型+'-上载失败'
}
});           
}
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>

函数createFileUploader（）{
var fileType='file'；
var uniqueId='4f2c1e5d42276'；
var Fileuploader=new qq.Fileuploader基本({
元素：document.getElementById（'file-uploader'），
按钮：document.getElementById（文件类型+'-upload按钮'），
操作：'/admin/media/upload/'+uniqueId+'/'+fileType，
是的，
多重：对，
onSubmit:函数（id，文件名）{}，
onProgress:函数（id、文件名、已加载、总计）{
},
onComplete:函数（id、文件名、responseJSON）{
$（“#”+fileType+'-upload container”）.append（“
）
$（'#'+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：函数（id、文件名）{
},
模板：“
睡眠时间越长越好。Afbeeldingen uploaden”，
文件模板：“
Niet geslaagd
”，
课程：{
按钮：文件类型+“-上载按钮”，
删除：文件类型+'-上载删除区域'，
dropActive:fileType+'-上载放置区域处于活动状态'，
列表：文件类型+“-上载列表”，
文件：文件类型+'-上载文件'，
微调器：文件类型+'-上载微调器'，
大小：文件类型+“-上载大小”，
取消：文件类型+'-上载取消'，
成功：文件类型+“-上载成功”，
失败：文件类型+'-上载失败'
}
});           
}
window.onload=createFileUploader；

---

不要太注意代码中的html，它包含在PHP中，不会破坏脚本。

在第二个脚本中，您很可能需要不同的uniqueId。

谁也看不出有什么问题？如果有帮助的话，我可以在线上传文件。uniqueId只用于ajax调用，不应该阻止整个函数工作。