plupload dynamic multipart_params 用于在重新初始化时丢失的正在进行的上传

Question

我有一个初始化 pluploader 的视图。我可以离开这个视图并且仍然允许上传完成。我遇到的问题是，每当我重新进入视图并且仍在进行上传时，在“BeforeUpload”中分配的“processId”的最后一个 multipart_param 被重复使用，而不是为每个文件单独使用。

这是一个例子： 我在视图上放置了 5 个文件。我离开视野。同时2个文件已完成上传进度。文件 1 的 processId 是“0123”，文件 2 的 processId 是“0124”。然后我重新进入视图。再次运行此脚本。其余文件均分配 processId 0124。

我确定会发生这种情况，因为在您进入视图时正在运行脚本并且某些内容被覆盖，但我还没有找到解决方案。

您可以在 uploader.fileAdded 区域中看到，我使用这一行创建了一个名为 processId 的随机 int 系列

var processId = process.createProcessId(file.index);

然后，在 BeforeUpload 中，我将该 processId 分配给一个 multipart_param，以便我可以为每个上传分配一个唯一的 processId。

uploader.settings.multipart_params.processId        = file.processId;

脚本

/* detects when a user drags files from the desktop */
initDragDetector:function(){
    var runtimes        = ui.getUploadRunTimes();
    var tmpId           = Math.random();                

    uploader = new plupload.Uploader({
        runtimes            :runtimes,
        max_file_size       :'500mb',
        url                 :jQuery('#upSrvUrl').val(),
        drop_element        :'uploadOverlay',
        browse_button       :'uploadOverlay',
        filters : [
            {title : "Image files", extensions : "jpg,tif,png,psd"},
        ],
        max_file_count      :100,
        multipart_params    :{rnd_id:Math.random(),tmp_sid:tmpId},
        multi_selection     :true,
        file_data_name      :'upfile_0',
    });

    //INITIALIZATION HANDLER 1
    uploader.bind('Init',function(up, params){
        uploader.settings.multipart_params.mount                = jQuery('#mount').val(); 
        uploader.settings.multipart_params.publisherId          = jQuery('#publisherId').val();
        uploader.settings.multipart_params.upload_range         = 100;

        if(uploader.features.dragdrop){
            var el      = jQuery("#uploadOverlay");

            el[0].ondragover = function(event) {
                event.dataTransfer.dropEffect = "copy";
            };
            el[0].ondragenter = function(e) {
                if(e.dataTransfer.types.length < 4){
                    el.show();
                }
            };
            el[0].ondrop = function() {
                if(jQuery('.photoThumbContainer').length > 0){
                    el.hide();
                }
            };
        }
    });

    //FILES ADDED HANDLER 2 (called after a drop of files)
    uploader.bind('FilesAdded', function(up, files){
        var i = 0;
        plupload.each(files, function(file) {
            file.index = i;
            uploader.fileAdded(file);  
            i++;
        });
        uploader.start();
    });

    //inject the file into the interface (before before upload function)
    uploader.fileAdded = function(file){
        var processId           = process.createProcessId(file.index);
        //added to the file object and passed into the registration
        file.processId          = processId;
    };

    //BEFORE EACH UPLOAD HANDLER 3
    //Note: this has to be here for any variable passed that changes per file. For example the processId.
    uploader.bind('BeforeUpload',function(up,file){
        var processId       = file.processId;
        var photoDiv        = jQuery('#photo'+processId+' .photoThumbDiv');
        var image           = jQuery(new Image()).appendTo(photoDiv);
        var preloader       = new mOxie.Image();

        preloader.downsize(100,100);
        preloader.onload    = function() {
            var img         = preloader.getAsDataURL();
            jQuery('#photo'+processId+' .photoThumbDiv').html('<img src="'+img+'">');
        };
        preloader.load(file.getSource());

        uploader.settings.multipart_params.processId        = file.processId;
    });

    //PROGRESS HANDLER 4
    uploader.bind('UploadProgress',function(up,file){
        var processId   = file.processId;
        var pb          = collection.getProgressBar(processId);
        if(file.percent<100){
            var progress = file.percent;
            pb.html('<div class="progressBar"><div class="progressBarColor"> </div></div>');
            jQuery('#photo'+processId+' .progressBarColor').css({width:progress+'%'});
        }else{
            pb.html('<div class="loaderSmall"></div> Processing');
        }
    });

    //FILE FINISHED HANDLER 5 
    uploader.bind('FileUploaded',function(up,file,info){
        var processId       = file.processId;
        var fileName        = file.name;
        file.fileName       = file.name;
        var params          = file;
        delete params.getNative;
        delete params.getSource;
        delete params.destroy;
        ui.request('registerFile','Photo',params);

        //ALL COMPLETE
        if(uploadedCnt == up.files.length){
            //uploader.splice();
            uploader.refresh();
        }
    });

    //GENERAL ERROR HANDLER -
    uploader.bind('Error', function(up, err) {
        switch(err.code){
            case plupload.FILE_EXTENSION_ERROR:
                fileExtensions = '';
                jQuery.each(up.settings.filters.mime_types,function(index,up) {
                    if(fileExtensions==''){
                        fileExtensions=up.extensions;
                    }else{
                        fileExtensions+=","+up.extensions;
                    }
                });
                var isOrAre = (fileExtensions && fileExtensions.indexOf(',') !== -1) ? 'are':'is';
                alertBox.msg("Only "+fileExtensions+" "+isOrAre+" accepted. Please try again.");
                break;
            case plupload.FILE_SIZE_ERROR:
                alertBox.msg("File size can not be larger than "+up.settings.max_file_size+'.');
                break;
        }
        uploader.refresh(); 
    });

    uploader.init();
},

感谢任何输入。谢谢。

Answer 1

如果有人对这里的解决方案感兴趣，那是因为上传器是全局设置的。每当初始化上传器时，在上传前添加 'var' 来修复它。