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并设置其文本。尝试这个代码，这样做和其他一些好东西（比如处理提交按钮的禁用状态并将Chooser按钮重置为“未使用”状态）：

<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类只是我注意到的。由于没有记录，因此可能会在未来版本的库中发生变化。其余的应该没问题。

使用Dropbox API JS Chooser时如何显示所选文件名

1 个答案: