代码之家  ›  专栏  ›  技术社区  ›  thiago

filepicker.io--易于实现

  •  0
  • thiago  · 技术社区  · 10 年前

    我有一个网站, btstats.com ,提供以下服务:

    “它从‘Bluescan 4.0 Scanner for Android’中导入一个JSON文件,并生成图表和统计数据”。

    我在我的网站上实现了Dropbox Chooser,使用了这段简单而优雅的代码来提供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专家。

    提前感谢。

    1 回复  |  直到 10 年前
        1
  •  1
  •   krystiangw    10 年前

    文件选择器代码非常类似:

    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>
    

    和工作示例 here