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。

qqFileuploader多个实例，只有最后一个工作

1 个答案: