为了在HTML页面中实现filepicker.io,我编写了以下代码,但不知何故,我无法做到这一点。此外,firebug控制台没有向我显示任何错误或警告。
我提出了以下问题:
filepicker.io—易于实现的
以下是我提到的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中时犯的错误。
你会在fiddle和我的代码中看到的另一个区别是,在fiddler中,他们包含了Bootstrap 3.2.0,但我没有,因为我不知道如何将其包含到我的HTML中。这是唯一的区别。
谢谢。等待您宝贵的答复。
您没有包含bootstrap css,但除了UI之外,它没有什么区别。我看到的另一个区别是,您没有包含filepicker.js
您的firebug控制台必须显示错误,说明文件选择器未定义
只要把这个脚本添加到你的脑海中,你就完成了。
<script src="http://api.filepicker.io/v1/filepicker.js"></script>
检查此小提琴