blueimp 使用动态路径获取上传的文件列表答案

【问题标题】：blueimp get uploaded file-list with dynamic pathblueimp 使用动态路径获取上传的文件列表
【发布时间】：2015-09-18 15:50:21
【问题描述】：

我能够通过 PHP 上传具有动态路径的文件。但我无法在动态文件夹中列出上传的文件。也许jQuery没有得到动态路径。但是我该怎么做呢？

感谢您的帮助

【问题讨论】：

Maybe jQuery didn't get the dynamic path 也许吧。发布您的代码。
和jQuery File Upload默认的index.html是一模一样的代码。对于上传，我只添加隐藏输入。

标签： jquery file-upload dynamic path

【解决方案1】：

好的，我得到了解决方案，我会花时间研究它。所以我的解决方案是在 jQuery 弹出窗口中使用 iframe 并集成到自制框架中。

第 1 步：jQuery 弹出窗口

<div id="fileuploadbox" title="Add file(s)"></div>
<script>
function fuBox(aFolder,aId)
{
  $( "#fileuploadbox" ).dialog({
    autoOpen: false,
    modal: true,
    width: "850px",
  });

  $('#fileuploadbox').html('');
  $('#fileuploadbox').append($('<iframe width=800 height=400 border=0 />').attr('src', 'index.php?module=fileupload&mode=client&folder='+aFolder+'&id='+aId)).dialog('open');

}
</script>

就我而言，文件夹位置取决于基本文件夹和网格行的 ID。例如folder=article id=18756，动态上传路径为APP_FILE_PATH/article/18756。

第 2 步：iframe 页面

iframe 页面与 blueimp jQuery-File-Uploader 的 index.html 相同。

<form id="fileupload" action="index.php" method="POST" enctype="multipart/form-data">
  <input type="hidden" name="module" value="fileupload">
  <input type="hidden" name="mode" value="server">
  <input type="hidden" name="folder" value="<?php echo $_GET['folder'].'/'.$_GET['id']; ?>/">

我在一个参数中连接文件夹和 id 并将其全部发送到服务器页面。

在底部，它必须注释 main.js 并编写你自己的代码，我做到了：

<script>
$(function () {
    'use strict';

    // Initialize the jQuery File Upload widget:
    $('#fileupload').fileupload({
        // Uncomment the following to send cross-domain cookies:
        url: '?module=fileupload&mode=server&folder=<?php echo $_GET['folder']."%2f".$_GET['id'];  ?>%2f'
    });

    // Enable iframe cross-domain access via redirect option:
    $('#fileupload').fileupload(
        'option',
        'redirect',
        window.location.href.replace(
            /\/[^\/]*$/,
            '/cors/result.html?%s'
        )
    );

    // Load existing files:
    $('#fileupload').addClass('fileupload-processing');
    $.ajax({
        // Uncomment the following to send cross-domain cookies:
        //xhrFields: {withCredentials: true},
        url: $('#fileupload').fileupload('option', 'url'),
        dataType: 'json',
        context: $('#fileupload')[0]
    }).always(function () {
        $(this).removeClass('fileupload-processing');
    }).done(function (result) {
        $(this).fileupload('option', 'done')
            .call(this, $.Event('done'), {result: result});
    });
});

</script>

此代码基于main.js，我只是更改了url并删除了github.io的块。 url在这里很重要，因为它用于删除上传的文件。

第 3 步：服务器页面

    $uploadDir = APP_FILE_PATH."/".$_REQUEST['folder'];
    $upload_handler = new UploadHandler(array(
      "script_url" => "index.php?module=fileupload&mode=server&folder=".$_REQUEST['folder'],
      "upload_dir" => $uploadDir,
      "download_via_php" => 1,
    ));

Mode 参数仅用于在我的框架中区分 iframe 头版请求或服务器请求。

所以这是我的解决方案，它可以与我的框架一起使用，也许有一个更简单的解决方案，我不知道。

【讨论】：