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

时间:2015-02-25 05:16:44

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

我已经编写了以下代码,以便将filepicker.io实现到我的HTML页面中,但不知怎的,我无法做到这一点。 firebug控制台也没有向我显示任何错误或警告。

我已经提到了以下问题:

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。这是唯一的区别。

感谢。等待你的宝贵回复。

1 个答案:

答案 0 :(得分:2)

您还没有包含bootstrap css,但除了UI之外它并没有什么不同。 我能看到的另一个区别是你没有包括 filepicker.js

你的firebug控制台必须显示错误 filepicker未定义

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

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

选中此fiddle