Plupload：获取多个动态dropzone的数据属性

Question

我正在开发一个项目，我们正在使用一个plupload实例来处理来自动态生成的多个dropzone的上传。我们使用Smarty模板，jQuery和PHP。在整个过程中需要承载一些属性，因为一旦上传到托管应用程序的服务器成功，就会发生文档传输，将文档传输到AWS。我正在努力了解如何通过plupload在初始上传期间收集需求属性。目前，文件可以很好地上传到本地服务器。

我需要的是获取行的id和drop-on行的data-type属性。您可以在开头的li中看到属性id={$doc.id}和data-type={$doc.id};这些是我需要收集的属性。以下是表单的标记：

{foreach $document_set as $doc}
    <li id="file-{$doc.id}" class="doc_list_row" data-type="{$doc.id}">
        <div class="row doc_list_row">
            <div class="col-sm-12" style="color: #fff">
                <div class="row">
                    <div class="col-sm-12 doc_list_title">
                        <h4>{$doc.name}</h4>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-8">
                    <div class="row">
                        <div class="col-sm-8 padtop-10">
                            <p>{$doc.description}</p>
                        </div>
                    </div>
                    <div class="row file_details_row">
                        <div class="col-sm-6">
                            <h4>Created On:</h4>
                            <p>{$doc.created}</h4>
                        </div>
                        <div class="col-sm-6">
                            <h4>Created By:</h4>
                            <p>{$doc.created_by}</p>
                        </div>
                    </div>
                    <div class="row file_details_row">
                        <div class="col-sm-6">
                            <h4>Updated On:</h4>
                            <p>{$doc.last_update}</h4>
                        </div>
                        <div class="col-sm-6">
                            <h4>Updated By:</h4>
                            <p>{$doc.last_update_by}</p>
                        </div>
                    </div>
                </div>
                <div class="col-sm-4 mng_file_icon_container">
                    <div class="row">
                        <div id="dl-{$doc.id}" class="col-xs-6 col-sm-6 dl_icon" data-filename="fileURLWillGoHere">
                            <div id="dl_circle-{$doc.id}" class="dl_circle circle">
                                <div class="triangle-down">
                                </div>
                                <h3 class="dl_version">V.{$doc.version_depth}</h3>
                            </div>
                        </div>
                        <div class="col-xs-6 col-sm-6 upld_icon" data-toggle="modal" data-target="#upld_file_modal">
                        <div id="upld_circle-{$doc.id}" class="upld_circle circle">
                            <div class="triangle-up">
                            </div>
                            <h3 class="upld_version">V.{$doc.version_depth + 1}</h3>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</li>
{/foreach}

以下是处理此切换的jQuery：

var dom = { uploader: $("#dropbox"), 
            uploads: $("ul.doc_list_container"), 
            dropzones: $("li.doc_list_row")
};

uploader = new plupload.Uploader({
    runtimes : "html5,silverlight,html4",
    browse_button : "file-pick",
    container : "file-cntr",
    max_file_zie : '10mb',
    url : "../upload.php",
    drop_element: "dropbox",
    filters : {title : "Text Files", extensions : "pdf, doc, docx, xls, xlsx, ppt, pptx"},
    init: {
        FilesAdded: function(up, files){ up.start(); $("#file-upld-progress").fadeIn(300); },
        UploadProgress: function(up, file){ $("#file-upld-progress").text(file.percent + "%"); },
        UploadComplete: function(up, file) { $("#file-upld-progress").fadeOut(300, function(){ setTimeout(function(){ $("#file-upld-progress").text(''); }, 2500); }); },
        FileUploaded: function(up, file, resp, src) { uploadHandler(resp.response, src); },
        Error: function(up, err) { showFormMsg("alert-error", "File Upload Error #" + err.code + ": " + err.message); }
    },
    multipart: true,
    multipart_params : {}
});

uploader.bind("BeforeUpload", handlePluploadBeforeUpload);
uploader.bind("PostInit", handlePluploadInit);
uploader.bind("FilesAdded", handlePluploadFilesAdded);
uploader.init();
uploader.bind("FileUploaded", function(up, file, resp) { uploadHandler(resp.response); });

var fileType = '';
dom.dropzones.each(function(){
    var dropzone = new mOxie.FileDrop({
        drop_zone: $(this).attr('id')
    });

    dropzone.ondrop = function(e){
        uploader.addFile(this.files);
        // fileType = $(this);
    };

    dropzone.init();

    var input = new mOxie.FileInput({
        browse_button: $("#file-pick")[0],
        container: this,
        multiple: true
    });

    input.onchange = function(e){
        uploader.addFile(input.files);
    };

    input.init()
});

function handlePluploadBeforeUpload( uploader, file ) {
    params = uploader.settings.multipart_params;
    var source = file.getSource();
    // console.log(source);
    // console.log(params.docType);
}


function handlePluploadInit(uploader, params){
    // console.log("Initialization complete.");
    // console.log("Drop-drop supported:", !! uploader.features.dragdrop);
}

function handlePluploadFilesAdded( uploader, files ) {
    for ( var i = 0 ; i < files.length ; i++ ) {
        files[i].docType = $(this).data('type');
    }
}

并上传.php：

<?php
session_start();
require_once(dirname(dirname(__DIR__)).'/sites/site_settings.php');

//Output passed values from plUpload
/*$fh = fopen("./request.txt",'w');
fwrite($fh, "Request Dump\n");
fwrite($fh, print_r($_REQUEST, true));
fwrite($fh, "\n\nPost Dump\n");
fwrite($fh, print_r($_POST, true));
fwrite($fh, "\n\nGET Dump\n");
fwrite($fh, print_r($_GET, true));
fwrite($fh, "\n\nServer Dump\n");
fwrite($fh, print_r($_SERVER, true));
fwrite($fh, "\n\nFiles Dump\n");
fwrite($fh, print_r($_FILES, true));
fclose($fh);*/

if($_SERVER['REQUEST_METHOD'] == "POST")
{
    if(! empty($_FILES['file']))
    {
        if($_FILES['file']['error'] === UPLOAD_ERR_OK)
        {
            $path_info = pathinfo($_FILES['file']['name']);
            $file_extension = strtolower($path_info["extension"]);
            $extension_whitelist = array("pdf", "doc", "docx", "xls", "xlsx", "ppt", "pptx");
            $doc_fk = $_FILES['file']['doc_fk'];
            if(in_array($file_extension, $extension_whitelist))
            {
                try
                {
                    $url = ADMIN_URL."/documents/temp/";
                    $path = ADMIN_PATH."/documents/temp/";
                    $fname = cleanFilename($_FILES['file']['name']);
                    if(move_uploaded_file($_FILES["file"]["tmp_name"], $path.$fname))
                        $ret = array("error" => 0, "path" => $url, "givenName" => $_FILES['file']['name'], "storedName" => $fname, "ext" => $file_extension, "doc_fk" => $doc_fk);
                    else
                        $ret = array("error" => 1, "error_msg" => "Failed to Upload File to System");
                }
                catch(Exception $e)
                {
                    $ret = array("error" => 1, "error_msg" => $e->getMessage());
                }
            }
            else
                $ret = array("error" => 1, "error_msg" => "Invalid file type: $file_extension. File must be PDF, Word Document, Excel Spreadsheet or a PowerPoint Presentation.");
        }
        else
            $ret = array("error" => 1, "error_msg" => "Upload Error Occurred");
    }
}
else
    $ret = array("error" => 1, "error_msg" => "Failed POST check: ".$_SERVER[REQUEST_METHOD]);

echo json_encode($ret);

?>

一旦我理解了如何收集这两个属性，我将能够继续完成项目的这一部分。这是最后一次挂断，并且已经吸收了几个小时的试验和错误，遵循各种GitHub文章和SO线程。我还提到了plupload的论坛，并没有遇到任何与我们在这里做的很相似的事情。 TIA提供任何帮助！

Answer 1

这是我们在此方案中为我们的用例设法提出的解决方案。使用我们的jQuery，我们创建了一组上传者。这是我们动态生成的上传者的id将被存储的地方。然后，对于每个潜在的上传者，我们实例化一个新的上传者。考虑到我们迭代doc_list_row类，我们可以获取每个列表行的单个id，并将其放在drop_element中。

此处的其他所有内容与典型的plupload实例基本相同。我的uploadHandler函数仅供参考，如果您以不同方式处理上传成功，则没有必要。 请记住，我们使用smarty模板和xajax，因此如果您使用标准的ajax或PHP之外的其他语言，那么这些代码中的某些代码将无法直接为您服务！ 我希望这可以帮助处于类似情况的其他人找到下一步，因为这个用例有点难以征服。

的jQuery

/*******************************************************************************
*
* Upload Document
*
*
*******************************************************************************/
function initUploaders(){
    if($("li.doc_list_row").length){
        upldrs = new Array();
            $("li.doc_list_row").each(function(){
                upld = new plupload.Uploader({
                runtimes : "html5",
                url : "upload.php",
                dragdrop: true,
                drop_element : $(this).attr("id"),
                browse_button : $(this).find("div.upld_icon").attr("id"),
                filters: {
                    max_file_size : '10mb',        
                    mime_types: [{title : "Scan Files", extensions : "pdf,jpg,jpeg,png,xls,xlsx,doc,docx"}]
                 },
                 multipart_params : {DOC_ID: $(this).attr("data-doc")}, 
                 init: {
                    // FilesAdded: function(up, files){ up.start(); },
                    FilesAdded: function(up, files){ up.start(); showProgressBar(up); },
                    UploadProgress: function(up, file){ $(".upld-progress").css("width", file.percent + "%"); },
                    UploadComplete: function(up, file) { hideProgressBar();      },
                    FileUploaded: function(up, file, resp) { uploadHandler(resp.response); },
                    Error: function(up, err) { showFormMsg("alert-error", "File Upload Error #" + err.code + ": " + err.message); }
                }
            });
            upld.init();
            upldrs.push(upld);
        });
    }
}


/*******************************************************************************
*
* Response handler for plupload
*
*
*******************************************************************************/
function uploadHandler(resp){
    var r = $.parseJSON(resp);
    if(r.error)
        showFormMsg("alert-danger", "Upload Error: " + r.error_msg);
    else{
        var elemId = $(upld.settings.drop_element[0]).attr('id').split('-');
        showFormMsg('alert-success', 'Upload successful.');
        xajax_paginate(currentPage(), currentDept(), $("#filter-doc-category").val(), $("#search_doc_name-id").val().trim(), $("#search_publisher_name-id").val().trim());
        $("#file-"+elemId).find('.unavail_dl_icon').removeClass('unavail_dl_icon').addClass('dl_icon');
    }
}

HTML

{if $documents_set|default:0}
{foreach $documents_set as $doc}
<li id="file-{$doc.id}" class="doc_list_row" data-doc="{$doc.id}" data-ondeck="0" data-default="{$doc.name}">
    <div class="row doc_list_row">
        <div class="col-sm-8">
            <div class="row">
                <div class="col-sm-12 doc_list_title">
                    <div class="col-sm-3"><h4>{$doc.name}</h4></div>
                        <div class="col-sm-4" style="padding-top: 15px; margin-bottom: 0;">
                        <div id="doc-upld-bar-{$doc.id}" class="progress upld-progress">
                        <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:100%"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-8">
                <div class="row">
                    <div class="col-sm-8 padtop-10">
                        <p>{$doc.description}</p>
                    </div>
                </div>
                <div class="row file_details_row">
                    <div class="col-sm-6">
                        <h4>Last Update:</h4>
                        <p>{$doc.lastUpdate}</p>
                    </div>
                    <div class="col-sm-6">
                        <h4>Last Update By:</h4>
                        <p>{$doc.last_update_by}</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-sm-4">
        <div class="row">
            <div class="col-sm-12 mng_file_icon_container">
                <div id="dl-{$doc.id}" class="col-xs-6 col-sm-6 {if $doc.file_list|default:''}dl_icon{else}unavail_dl_icon{/if}" data-doc="{$doc.id}">
                    <!-- This is the selector -->
                    {if $doc.file_list|default:''}
                    <select id="version-selector-{$doc.id}" class="available_versions">
                        {foreach $doc.file_list as $f}<option value="{$f}">{if $f@first}Current{else}{$f@index} Previous{/if}</option>{/foreach}
                    </select>

                    <div id="dl_circle-{$doc.id}" class="dl_circle circle" data-for="{$doc.file}">
                    <div class="triangle-down">
                    </div>
                </div>
                {else}
                <select class="no_file" DISABLED>
                    <option>No File</option>
                </select>
                <div id="unavail_dl" class="unavail_dl_circle circle">
                <div class="unavail_triangle">
                </div>
                </div>
                {/if}
            </div>
            <div id="upld-{$doc.id}" class="col-xs-6 col-sm-6 upld_icon">
            <div id="upld_circle-{$doc.id}" class="upld_circle circle">
                <div class="triangle-up">
                </div>
            </div>
        </div>
    </div>
            </div>
        </div>
    </div>
</li>
{/foreach}