blueimp上传带有动态路径的文件列表

时间:2015-09-18 15:50:21

标签: jquery file-upload dynamic path

我可以通过PHP上传带有动态路径的文件。但是我无法在动态文件夹中列出上传的文件。也许jQuery没有获得动态路径。但是我怎么能这样做呢?

感谢您的帮助

1 个答案:

答案 0 :(得分:0)

好的,我得到了解决方案,我花了很多时间。所以我的解决方案是在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块。这里的网址很重要,因为它用于删除上传的文件。

第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首页或服务器请求的请求。

所以这是我的解决方案,它可以适用于我的框架,也许有一个更简单的解决方案,我不知道。