Javascript 为什么我不能在HTML代码中实现filepicker.io？_Javascript_Jquery_Html_Twitter Bootstrap 3_Filepicker.io

Javascript 为什么我不能在HTML代码中实现filepicker.io？

javascript jquery html twitter-bootstrap-3

Javascript 为什么我不能在HTML代码中实现filepicker.io？,javascript,jquery,html,twitter-bootstrap-3,filepicker.io,Javascript,Jquery,Html,Twitter Bootstrap 3,Filepicker.io,为了在HTML页面中实现filepicker.io，我编写了以下代码，但不知何故，我无法做到这一点。此外，firebug控制台没有向我显示任何错误或警告为此，我提出了以下问题：以下是我提到的JSFIDLE链接：以下是我的HTML文件中的代码供您参考： <!DOCTYPE html> <html> <head> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.2

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

为此，我提出了以下问题：

以下是我提到的JSFIDLE链接：

以下是我的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中时犯的错误

在fiddle和我的代码中，您将看到的另一个区别是，在fiddle中，他们包含了Bootstrap 3.2.0，但我没有，因为我不知道如何将其包含到HTML中。这是唯一的区别

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

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

firebug控制台必须显示错误，说明filepicker未定义

只要在你的头脑中加入这个脚本，你就完成了

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

检查此

是否尝试此插件@我不想从本地系统中选择文件。我只想将filepicker.io集成到我的HTML代码中。您面临的问题是什么？我在这里看不到任何问题…@MokshShah：如果你只是简单地复制-粘贴我的整个代码到某个HTML文件并在你的系统上运行，当用户单击“选择MS-WORD文件”按钮时，你将看不到任何事情发生。在firebug控制台中，你可以看到任何东西。那是我的问题。什么都没有发生。你可以在我的问题中看到JSFIDLE链接提供的演示，以获得更多的理解。嘿，谢谢兄弟。现在它工作得非常好和完美。