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

我使用dropbox选择器（）作为表单的一部分。一旦用户选择了一个文件，我想在选择器按钮旁边显示该文件名

最好包含一个“删除”链接来清除选择

---

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

编辑：前面的回答使用了

e.files[0].link.split（'/'）.pop（）

，但是已经有了一个字段！它被称为

name

。更新如下

文件名是返回的内容之一，因此您可以执行以下操作：

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

至于如何在页面上显示它，我建议在某处添加一个

span

，并设置它的文本。试试这段代码，它可以做到这一点，还有一些其他的好事情（比如处理submit按钮的禁用状态和将Chooser按钮重置为“unused”状态）：

所选文件：（）

$（函数（）{
$（'#chooser'）。在（'dbxchooserssuccess'，函数（e）上{
var url=e.originalEvent.files[0]。链接；
var filename=e.originalEvent.files[0]。名称；
$（“#所选”）.show（）；
$（'#filename'）。文本（filename）；
$（“#提交”）.prop（'disabled'，false）；
});
$（“#删除”）。单击（函数（e）{
e、 预防默认值（）；
$（“#选定”）.hide（）；
$（'.dropbox-chooser'）.removeClass（'dropbox-chooser-used'）；
$（“#提交”）.prop（'disabled'，true）；
});
});

编辑

---

我应该指出，我注意到使用的

dropbox选择器

类。由于没有文档记录，这可能会在未来版本的库中发生变化。剩下的应该没问题。

编辑：前面的答案使用了

e.files[0].link.split（'/'）.pop（）

，但是已经有了一个字段！它被称为

name

。更新如下

文件名是返回的内容之一，因此您可以执行以下操作：

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

至于如何在页面上显示它，我建议在某处添加一个

span

，并设置它的文本。试试这段代码，它可以做到这一点，还有一些其他的好事情（比如处理submit按钮的禁用状态和将Chooser按钮重置为“unused”状态）：

所选文件：（）

$（函数（）{
$（'#chooser'）。在（'dbxchooserssuccess'，函数（e）上{
var url=e.originalEvent.files[0]。链接；
var filename=e.originalEvent.files[0]。名称；
$（“#所选”）.show（）；
$（'#filename'）。文本（filename）；
$（“#提交”）.prop（'disabled'，false）；
});
$（“#删除”）。单击（函数（e）{
e、 预防默认值（）；
$（“#选定”）.hide（）；
$（'.dropbox-chooser'）.removeClass（'dropbox-chooser-used'）；
$（“#提交”）.prop（'disabled'，true）；
});
});

编辑

我应该指出，我注意到使用的

dropbox选择器

类。由于没有文档记录，这可能会在未来版本的库中发生变化。剩下的应该没问题