使用jQuery File Upload和Rails实现目录上载

Question

我正在尝试使用Blueimp的jQuery File Upload插件实现目录上传.Rails 4是我的后端,对于附件,我正在使用Carrierwave.

现在的问题是,jquery插件无法识别我正在上传的文件夹.我已经在输入字段中传递了webkitdirectory参数.有人可以帮我弄这个吗？

提前致谢.

这是application.js中的jQuery文件上载代码:

$('#fileupload').fileupload({
    dataType: "script",
    sequentialUploads: true,
    // This function is called when a file is added to the queue;
    // either via the browse button, or via drag/drop:
    add: function(e, data) {
        data.context = $(tmpl("template-upload", data.files[
                0]))
        data.context.addClass('working');
        //$('.upload-status-box').addClass('working');
        $('#Upload-Bar').append(data.context);
        $('.upload-status-box').show();
        // Listen for clicks on the cancel button
        data.context.find('span.cancel-upload').click(
            function() {
                jqXHR.abort();
                data.context.fadeOut(function() {
                    data.context.remove();
                });
                count = count - 1;
                removeUploadStatusBoxOnCompletion();
            });
        var jqXHR = data.submit();
        count = count + 1;
    },
    progress: function(e, data) {
        if (data.context) {
            $('.upload-status-box').show();
            progress = parseInt((data.loaded / data.total) *
                100);
            var uploadMeta = parseInt(data.loaded / 1000000) +
                "/" + parseInt(data.total / 1000000) +
                " MB - " + progress + "%";
            data.context.find('.progress-bar').css('width',
                progress + '%');
            data.context.find('.status').text(uploadMeta);
        }
    },
    done: function(e, data) {
        console.log(
            'Your files have been uploaded successfully!'
        );
        // alert('Your files have been uploaded successfully! Depending on the file size, you might have to wait for a while before performing any actions.');
        count = count - 1;
        data.context.removeClass('working');
        data.context.find('button.cancel-upload').hide();
        removeUploadStatusBoxOnCompletion();
    }
});

这是我的输入字段:

<div class="awesome-file-uploads" id="inline-upload-status">
<%= form_for [myfolder, Myfile.new], html: { multipart: true, :id => "fileupload" } do |f| %>
    <%= f.file_field :attachment, multiple: true, id: "fileinput", style: "display:none;", "webkitdirectory"=> "", "directory"=> "" %>
    <%= f.hidden_field :myfolder_parent_id, value: myfolder.id %>
<% end %>

这是上传和处理文件夹内文件的代码:

    $('#folderupload').change(function(e) {
    e.preventDefault();
    NProgress.done();
    var items = e.target.files;
    var paths = ""; //
    // var myfolder_id = $(this).parent();
    for (var i=0, file; file=items[i]; i++) { 
    paths += file.webkitRelativePath+"###";
    } //
    // uploadFiles(items, myfolder_id.data('inside'));
    $("#paths").val(paths);
    $("#folderupload").submit(); //
});
function uploadFiles(items, myfolder_id){
   xhr = new XMLHttpRequest();
    data = new FormData();
    paths = "";

    var AUTH_TOKEN = $('meta[name=csrf-token]').attr('content');
    data.append('authenticity_token', AUTH_TOKEN);

    // Set how to handle the response text from the server
    xhr.onreadystatechange = function(ev){
        console.debug(xhr.responseText);
    };

    for (var i=0, file; file=items[i]; i++) {
        paths += file.webkitRelativePath+"###";
        data.append(i, file);
    }

    data.append('paths', paths);

    xhr.open('POST', "/myfolders/"+myfolder_id+"/create_from_folder", true);
    xhr.send(this.data);
}

Answer 1

将 jQuery 文件上传（UI 版本）与自定义服务器端上传处理程序结合使用

1. 在您的平台（Ruby、Python、Java 等）上实现一个文件上传处理程序，用于处理基于普通表单的文件上传并将其上传到您的服务器。另请参阅文档主页上的服务器端特定教程。
2. 下载并解压插件存档。
3. 编辑 main.js 并将 url 选项调整为自定义文件上传处理程序的 URL。或者，您可以删除 url 选项并编辑 index.html，并将 HTML 表单元素的 action 属性调整为自定义文件上传处理程序的 URL。如果您的上传处理程序需要文件上传的另一个参数名称而不是 files[]，您还必须调整文件输入名称属性或设置 paramName 选项（请参阅选项文档）。
4. 将 jQuery-File-Upload 文件夹上传到您的网站。
5. 扩展您的自定义服务器端上传处理程序以返回类似于以下输出的 JSON 响应：

您可以通过访问https://github.com/blueimp/jQuery-File-Upload/wiki/Setup查看输出格式