Question

当我尝试使用以下函数获取所有文件的相对路径时，

uploader.bind('FilesAdded', function(up, files) {
    plupload.each(files,function(file) {
        console.log('Relative path: ' + file.relativePath)
    })
});

记录为Relative Path: undefined

如何解决这个问题？

Answer 1

这应该包含在plupload的下一个版本（2.1.3）中。在新版本发布之前，您可能希望使用此解决方法：

（资料来源：http://www.i-do-this.com/blog/plupload-2-1-chrome-and-folder-support/57）

var uploader, traverseFileTree, map = {};

// replace by your plupload setup, this is just an example
uploader = new plupload.Uploader({
    runtimes : 'html5',
    container: 'drop-target',
    drop_element: 'drop-target',
    browse_button : 'files',
    url : 'http://www.torrentplease.com/dropzone.php',
    init: {
        PostInit: function() {
            document.getElementById('uploadfiles').onclick = function() {
                uploader.start();
                return false;
            };
        },
        BeforeUpload: function (up, file) {
            // send relativePath along
            if(map[file.name] !== undefined) {
                up.setOption('multipart_params', {
                    relativePath: map[file.name].shift()
                });
            }
        }
    }
});
uploader.init();

// all relative paths are built here
traverseFileTree = function (item, path) {
var dirReader = null;
    path = path || '';
    if (item.isFile) {
        item.file(function(file) {
            // careful here, could be several files of the same name
            // we assume files will be in the same order here than in plupload
            if(map[file.name] === undefined) {
                map[file.name] = [];
            }
            map[file.name].push(path);
        });
    } else if (item.isDirectory) {
        dirReader = item.createReader();
        dirReader.readEntries(function (entries) {
            var n = 0;
            for (n = 0; n < entries.length; n++) {
                traverseFileTree(entries[n], path + item.name + "/");
            }
        });
    }
};

// bind another handler to the drop event to build an object representing the folder structure
document.getElementById('drop-target').addEventListener('drop', function(e) {
    var items = e.dataTransfer.items, n, item;
    for(n = 0; n < items.length; n++) {
        item = items[n].webkitGetAsEntry();
        if(item) {
            traverseFileTree(item);
        }
    }
}, false);

Answer 2

最新版本现在提供相对路径。

您可以尝试使用

uploader.bind('FilesAdded', function(up, files) {
    plupload.each(files,function(file) {
        source = file.getSource();
        relative_path = source.relativePath
        console.log('Relative path: ' + relative_path)
    })
});

在Plupload中拖放文件夹时获取所有文件的relativePath

2 个答案: