javascript - 使用 Dropbox API JS 选择器时如何显示选定的文件名

Question

我正在使用 Dropbox 选择器 ( https://www.dropbox.com/developers/dropins/chooser/js ) 作为表单的一部分。一旦用户选择了一个文件，我想在选择器按钮旁边显示该文件名。

包含一个“删除”链接以清除选择也很好。

我假设这将使用 javascript/jquery 完成。任何帮助将不胜感激。

Answer 1

编辑：使用了较早的答案e.files[0].link.split('/').pop()，但已经有一个字段！它被称为name。更新如下。

文件名是返回的内容之一，因此您可以这样做：

var url = e.files[0].link;
var name = e.files[0].name;

至于如何在页面上显示，我建议在span某处添加并设置其文本。试试这个代码，它可以做到这一点以及其他一些不错的事情（比如处理提交按钮的禁用状态并将选择器按钮重置为“未使用”状态）：

<form>
    <input id="chooser" type="dropbox-chooser" name="selected-file" data-link-type="direct" style="visibility: hidden;"/>
    <p id="chosen" style="display:none">Chosen file: <span id="filename"></span> (<a id="remove" href="#">remove</a>)</p>
    <input type="submit" id="submit" disabled />
</form>

<script>
    $(function () {
        $('#chooser').on('DbxChooserSuccess', function (e) {
            var url = e.originalEvent.files[0].link;
            var filename = e.originalEvent.files[0].name;

            $('#chosen').show();
            $('#filename').text(filename);
            $('#submit').prop('disabled', false);
        });
        $('#remove').click(function (e) {
            e.preventDefault();
            $('#chosen').hide();
            $('.dropbox-chooser').removeClass('dropbox-chooser-used');
            $('#submit').prop('disabled', true);
        });
    });
</script>

编辑

我应该指出，这dropbox-chooser-used门课只是我注意到的。由于它没有记录在案，这可能会在库的未来版本中发生变化。其余的应该没问题。