1

フォームの一部としてドロップボックス チューザー ( https://www.dropbox.com/developers/dropins/chooser/js ) を使用しています。ユーザーがファイルを選択したら、そのファイル名を選択ボタンの横に表示したいと思います。

また、選択をクリアするための「削除」リンクを含めるとよいでしょう。

これは、javascript/jquery を使用して行われると想定しています。どんな助けでも大歓迎です。

4

1 に答える 1

1

編集：以前の回答が使用されe.files[0].link.split('/').pop()ましたが、これにはすでにフィールドがあります！と呼ばれていnameます。以下に更新しました。

ファイル名は返されるものの 1 つなので、次のようにするだけです。

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クラスは私が気づいたものに過ぎないことを指摘しておく必要があります。文書化されていないため、ライブラリの将来のバージョンで変更される可能性があります。残りは問題ないはずです。

于 2013-08-08T15:42:09.407 に答える