Question

我在两个方面使用精细上传器，但是在一个过程中都是如此。我有pdf文件，我拆分和合并，并使用基本的精细上传器实例在本地执行。当我完成后，我想将每个合并文件上传到我们的amazon s3存储桶。我在同一个javascript文件中有两个精细上传器的实例。但是，s3实例在jquery包装器中定义时会出错。

此页面的过程包括以下内容：

用户选择第一个上传者上传按钮上传一个 pdf文件
弹出一个模态，允许用户选择是否按原样上传文件或将pdf文件拆分为单独的页面如果用户选择按原样上传... s3 bucket fine uploader是调用（现在不工作）;如果用户选择拆分pdf 文件，文件拆分后弹出另一个模态并显示用户按文档类型重新组织的各个页面。
将pdf页面重新组织为单独的doc类型后，它们将被合并到新的PDF文件。
当每个合并文件完成后，我想将该文件上传到该用户的s3存储桶。这是需要调用第二个上传器实例来添加文件然后上传文件的地方。

当用户选择第一个上传按钮时，以下是我在javascript控制台（使用Chrome）中收到的错误消息：

VM33414:16 
Uncaught TypeError: Cannot read property 'uuid' of undefined**
qq.basePublicApi.getUuid @ VM33414:16
qq.basePrivateApi._onSubmitDelete @ VM33414:17
qq.uiPrivateApi._onSubmitDelete @ VM33414:18
qq.basePublicApi.deleteFile @ VM33414:16
(anonymous function) @ VM33416:224
b.event.dispatch @ jquery-1.9.1.min.js:3
v.handle @ jquery-1.9.1.min.js:3
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_W9.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function
jQuery.ajax.success @ VM33416:165
c @ jquery-1.9.1.min.js:3
p.fireWith @ jquery-1.9.1.min.js:3
k @ jquery-1.9.1.min.js:5
r @ jquery-1.9.1.min.js:5
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_License.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function
jQuery.ajax.success @ VM33416:165
c @ jquery-1.9.1.min.js:3
p.fireWith @ jquery-1.9.1.min.js:3
k @ jquery-1.9.1.min.js:5
r @ jquery-1.9.1.min.js:5
VM33416:157 

merged file: /var/www/html/ajax/common/files/044da577-e054-407a-95a5-aaa17899897b/1_TestDoc5_Other.pdf
VM33416:165 Uncaught TypeError: $(...).fineUploaderS3 is not a function

这是我的脚本文件：

var thisArray=[];
var pdfoptions=[];
var mydate = new Date();
var month = mydate.getMonth() + 1 ;
var today = month + '/' + mydate.getDate() + '/' +  mydate.getFullYear();

//s3 instance
$('#s3-uploader').fineUploaderS3({
    debug: true,
    autoUpload: false,
    uploaderType: 'basic',
    request: {
        endpoint: 'rog-zone.s3.amazonaws.com',
        accessKey:'################'
    },
    objectProperties: {
        // Since we want all items to be publicly accessible w/out a server to return a signed URL
        acl: "public-read"
    },
    signature: {
        endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
    },
    validation: {
        itemLimit: 5,
        sizeLimit: 15000000
    }
    }).on('submit', function (event,id, name) {
        console.log("[on submit] id:"+id+ " and name:"+name);
         return new Promise(function(resolve, reject) {
            resolve();
         });
    }).on('complete', function(event,id,fileName,responseJSON,xhr){
            console.log("[on complete]:"+id+ " and filename:"+fileName);
            var $fileEl = $(this).fineUploaderS3("getItemByFileId", id);            

    }).on('upload', function(event, id, name, isError,responseJSON) {
            var obj = JSON.stringify(responseJSON);
            console.log("[on Upload] id:"+id+ " and response = "+obj);
    }
);


//manual file uploader for local processing.  WHen done, upload merged file to s3 bucket
var manualUploader = new qq.FineUploader({
        element: document.getElementById("fine-uploader"),
        template: 'qq-template-manual',
        debug: true,
        request: {
            endpoint: "/ajax/common/endpoint.php"
        },
        deleteFile: {
            enabled: true,
            endpoint: "/ajax/common/endpoint.php"
        },
        chunking: {
            enabled: true
        },
        resume: {
            enabled: true
        },
        retry: {
            enableAuto: true,
            showButton: true
        },
        callbacks: {
            onUpload: function (id, name) {
                console.log("onUpload");
            },
            onComplete: function(id, fileName, responseJSON){
                console.log("onComplete >> id:"+id+ "; filename:"+fileName+"; folder:"+responseJSON.uuid);
                var uuid = responseJSON.uuid;
                $("#splitter_uuid").val(uuid);
                var filetosplit = uuid+"/"+fileName;
                var imgsrc = 'ajax/common/files/'+uuid+'/';
                var fileinfo = fileName.split(".");
                var fileprefix = fileinfo[0];
                $("#splitter_filename").val(fileName);

                jQuery('#pdfHandler').modal();
                jQuery('#btnUploadPDF').click(function () {
                    return true;
                });
                jQuery('#btnSplitPDF').click(function (e) {
                    jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfsplitter.php?pdf="+filetosplit,
                        success: function(result){
                            //console.log("result from ajax:"+result);
                            jQuery("#pagecounttext").text("There are "+result+" pages to split.  Please indicate how you would like to organize these files below.");
                            for (i=1;i<=result;i++){
                                var imgfile = fileprefix+'_'+i+'.jpg';
                                var pdfpage = '<a href="#" class="btn pdf-page text-inverse p-0" data-page-id="'+i+'"><img class="imgsplit" src="'+imgsrc+imgfile+'" height=90 border="1"><a/>';
                                //<i class="btl bt-file bt-3x"></i>
                                jQuery("#pdfpages").append(pdfpage);
                            }
                            //show modal where user selects how to organize pages with document type
                            $("#pdfSplitter").modal("show");
                            //add pages selected to document type
                            jQuery('a.pdf-page').on('click',function(e){
                                e.preventDefault();
                                var thisPageID=jQuery(this).data("page-id");
                                thisArray.push(thisPageID);
                                thisArray.sort();
                                jQuery(this).attr("disabled",true);
                                jQuery('#pdfSplitterTable tr.active td input').val(thisArray);                              
                                //save selections in local array since this element does not seem to persist to when it is needed
                                var thisoption = jQuery("#pdfSplitterTable tr.active td select").val();


                            });     

                            jQuery('#btnAddDocumentRow').on('click',function(e){
                                e.preventDefault();
                                var originalSelID=jQuery('#pdfSplitterTable tr.original td select').attr('id');
                                var pdfSplitterTableLen=jQuery('#pdfSplitterTable tr').length;
                                jQuery('#pdfSplitterTable tr').removeClass('active');
                                jQuery('#pdfSplitterTable tr:last').clone().insertAfter('#pdfSplitterTable tr:last');
                                jQuery('#pdfSplitterTable tr:last').removeClass();
                                jQuery('#pdfSplitterTable tr:last').addClass('active');
                                jQuery('#pdfSplitterTable tr:last td input').val('');
                                jQuery('#pdfSplitterTable tr:last td select').attr('id',originalSelID+pdfSplitterTableLen);
                                jQuery('#pdfSplitterTable tr:last td select').attr('name',originalSelID+pdfSplitterTableLen);
                                jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").val(0);
                                jQuery("select[name='"+originalSelID+pdfSplitterTableLen+"']").change();    
                                thisArray=[];
                            });                                             
                    }});
                    return true;                        
                });

            },
            onSubmit: function(id,name){
                var fileExtension = name.substring(name.lastIndexOf('.') + 1).toUpperCase();
                if(fileExtension==='PDF'){                    
                    //jQuery('#pdfHandler').modal();
                    return true;
                } else {
                    alert("Please select a PDF file");
                    return false;
                }
            },
            onSubmitted: function (id, name) {
                //console.log("onSubmitted");                
            }
        }
    });

$( document ).ready(function() {

    jQuery('#btnUploadPDF,#btnSplitPDF').on('click',function(e){
        jQuery('#clickfrom').val('nav-tabs');
    });

    jQuery('#btnSplitPDF').on ('click',function(e){
        e.preventDefault();
    });

    jQuery("#btnUploadFiles").on('click',function(e){
        var uuid = jQuery("#splitter_uuid").val();
        var filename = jQuery("#splitter_filename").val();
        var userid = jQuery("#splitter_userid").val();

        jQuery("#pdfSplitterTable td select").each(function() {
            var option = jQuery(this).val();
            var pageids = jQuery(this).closest('td').next().find('input').val();
            console.log("pageids: "+pageids+" and option="+option);//test this
            //add new item to table of documents for user
            var lastclass = jQuery("#document-checklist tr").last().attr("class");
            var newclass = 'even';
            if (lastclass=='even'){newclass = 'odd';}
            jQuery("#document-checklist tbody")
                .append('<tr class="'+newclass+'"><td>'+option
                +'</td><td>Pending Review</td><td></td><td>'+today
                +'</td><td></td><td></td><td><a href="#"></a><i class="fa fa-file-pdf-o"></i></a></td></tr>');      
            //console.log("merge files: "+JSON.stringify(pdfoptions));                  

            jQuery.ajax({url: "http://52.11.64.64/ajax/common/pdfmerge.php?pdf="+filename+"&uuid="+uuid+"&pageids="+pageids+"&option="+option+"&userid="+userid,
                success: function(mergedfile){
                    //result is new merged filename to upload
                    console.log("merged file: "+mergedfile);

                    //HERE IS WHERE I WANT TO UPLOAD TO S3
                    jQuery("#s3-uploader").fineUploaderS3('addFiles',mergedfile);
                    jQuery("#s3-uploader").fineUploaderS3('uploadStoredFiles');             
                }
            });     
        });

        manualUploader.deleteFile();    
    });

});//doc ready

谢谢你，辛迪

Answer 1

可以在一个HTML文档中定义和利用多个精细上传器端点处理程序。但是，为了做到这一点，由于名称空间冲突，无法使用jQuery插件。事实上，jQuery插件（包装器）已经出现在full removal for quite some time的路线图中。

您很可能希望利用multiple server type "Windows Azure + Amazon S3 + Traditional" download在页面上集成传统和Amazon S3端点处理程序。这将要求您使用传统的JavaScript语法定义Amazon S3端点处理程序（实际上有点简单）：

var uploader = new qq.s3.FineUploaderBasic({
    debug: true,
    autoUpload: false,
    request: {
        endpoint: 'rog-zone.s3.amazonaws.com',
        accessKey:'################'
    },
    objectProperties: {
        // Since we want all items to be publicly accessible w/out a server to return a signed URL
        acl: "public-read"
    },
    signature: {
        endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
    },
    validation: {
        itemLimit: 5,
        sizeLimit: 15000000
    },
    callbacks: {
        onSubmit: function(id, name) {
            console.log("[on submit] id:" + id + " and name:" + name);
            return new Promise(function(resolve, reject) {
                resolve();
            });
        },
        onComplete: function(id, fileName, responseJSON, xhr){
            console.log("[on complete]:" + id + " and filename:" + fileName);
            var fileEl = this.getItemByFileId(id);              
        },
        onUpload: function(id, name, isError, responseJSON) {
            var obj = JSON.stringify(responseJSON);
            console.log("[on Upload] id:" + id + " and response = " + obj);
        }
    }
});

是否可以在创建常规精细上传器实例的同时创建s3上传器实例？

1 个答案: