filepicker.io -易于实现

Question

我有一个名为btstats.com的站点，它提供以下服务：

“它从‘Blueescan4.0ScanerforAndroid’中导入一个JSON文件，并生成图形和统计数据”。

我在我的站点上使用这个简单而优雅的代码实现了Dropbox选择器，以提供由Dropbox提供的功能：

<script type="text/javascript">
document.getElementById('dropbox-bt').onclick = function()
{
    Dropbox.choose
    ({
    linkType: 'direct',
    extensions: ['.json'],
    multiselect: false,
    success: function (files)
    {
        var dbSelected = "File selected: ";
        var filenamePanel = document.getElementById('filenamePanel');
        filenamePanel.textContent = dbSelected + files[0].name;

        var postLink = files[0].link;
        document.getElementById('postLink').value = postLink;

        var postName = files[0].name;
        document.getElementById('postName').value = postName;   
    }
  });
};
</script>

我喜欢上面的代码，因为它很小，并提供了文件链接和文件名。

我正在考虑实现filepicker.io，这样我就可以为用户提供更多的云存储选项。

我找不到一种简单的方法将filepicker.io的窗口添加到我提供这些选项的站点中。首先，我想使用一个按钮来实现它，而且我在他们的文档中找不到getElementById的示例。

是否有人可以根据我的Dropbox实现(提供文件链接和文件名)来指导我或编写一个小的filepicker.io示例？我不是Javascript专家。

提前谢谢。

Answer 1

文件处理程序代码非常类似：

filepicker.setKey('yourApikey');

document.getElementById('filepickerBtn').onclick = selectFile;

function selectFile(){
    filepicker.pick(
        // picker options
        {
            extension: '.json',
        },
        onSuccessCallback
    );
};

function onSuccessCallback(Blob){
    document.getElementById('postName').textContent = Blob.filename;
    document.getElementById('postlink').textContent = Blob.url;
    document.getElementById('results').textContent = JSON.stringify(Blob);            
};

示例html代码：

<div class="container">
    <h3>Filepicker example</h3>
    <p>
        <button id="filepickerBtn" class="btn btn-primary">
            Select json file
        </button>
    </p>
    <p>Filename: <span id="postName"></span></p>
    <p>Filelink: <span id="postlink"></span></p>
    <p>Results: <pre id="results">Upload file to see results</pre></p>
</div>

和工作示例这里