为什么我无法在我的 HTML 代码中实现 filepicker.io？答案

【问题标题】：Why I'm not able to implement filepicker.io into my HTML code?为什么我无法在我的 HTML 代码中实现 filepicker.io？
【发布时间】：2015-02-25 05:16:43
【问题描述】：

为了在我的 HTML 页面中实现 filepicker.io，我编写了以下代码，但不知何故我无法做到这一点。萤火虫控制台也没有向我显示任何错误或警告。

我为此提出了以下问题：

filepicker.io -- easy implementation

以下是我提到的 jsFiddle 链接：

http://jsfiddle.net/krystiangw/61861wsv/

以下是我的 HTML 文件中的代码供您参考：

<!DOCTYPE html>
<html>
  <head>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2.min.js">
    </script>
    <script>
        $(document).ready(function(){
            filepicker.setKey('AFJvi8ODOSrOayoCb3swoz');
            document.getElementById('filepickerBtn').onclick = selectFile;

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

            function onSuccessCallback(Blob){
            document.getElementById('postName').textContent = Blob.filename;
            document.getElementById('postlink').textContent = Blob.url;
            document.getElementById('results').textContent = JSON.stringify(Blob);            
            };
        });
        </script>
    </head>
    <body>
      <div class="container">
      <h3>Filepicker example</h3>
      <p>
        <button id="filepickerBtn" class="btn btn-primary">
        Select MS-WORD 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>
  </body>
</html>

请指导并纠正我将 filepicker.io 集成到 HTML 中的错误。

你会在小提琴和我的代码中观察到的另一个区别是，在小提琴中它们包含了 Bootstrap 3.2.0，但我没有，因为我不知道如何包含到我的 HTML 中。这是唯一的区别。

谢谢。等待您宝贵的回复。

【问题讨论】：

试试这个插件？ malsup.com/jquery/form/#file-upload
@FrebinFrancis：我不想从本地系统中选择文件。我只想将 filepicker.io 集成到我的 HTML 代码中。
您遇到了什么问题？我在这里看不到任何问题...
@MokshShah：如果您只是将我的整个代码复制粘贴到某个 HTML 文件并在您的系统上运行它，那么当用户单击“选择 MS-WORD”时，您将看不到任何事情发生文件”按钮。同样在萤火虫控制台中，您可以看到任何东西。那是我的问题。什么都没有发生。您可以在我的问题中查看 jsFiddle 链接中提供的演示以获得更多理解。

标签： javascript jquery html twitter-bootstrap-3 filepicker.io

【解决方案1】：

您没有包含引导 css，但除了 UI 之外它没有任何区别。我可以看到的另一个区别是您没有包含 filepicker.js

您的萤火虫控制台必须显示错误提示 filepicker is undefined

只需将此脚本添加到您的脑海中即可完成。

<script src="http://api.filepicker.io/v1/filepicker.js"></script>

查看fiddle

【讨论】：

嘿，谢谢兄弟。现在它工作得非常完美。