使用filepicker.IO上传图像

时间:2013-02-28 01:03:27

标签: filepicker.io

我正在尝试使用Filepicker IO API让用户上传图片。我正在尝试复制“开始”视频中显示的步骤,但我遇到了路障。 Filepicker打开很好,但它似乎没有调用我在div中的javascript函数(openFilePicker())(当在div中设置filepicker设置,然后它工作)。此外,在我上传图像后,我不知道如何获取信息,所以我可以在另一个页面上显示它(用php等存储它。)如果你能帮助我,我会非常感激。这是代码:

<script type="text/javascript">

    function openFilePicker() {

        filepicker.setKey('MYKEYHERE');

        filepicker.pick({
                        mimetypes: ['image/*', 'text/plain'],
                        container: 'window',
                        services:['COMPUTER', 'FACEBOOK', 'GMAIL', 'PICASA', 'DROPBOX', 'INSTAGRAM', 'FLICKR'],
                        },
                        function(FPFile){
                        console.log(JSON.stringify(FPFile));

                        //UPLOAD COMPLETE
                        UpdateHTMLWithUploadedFile(FPFile.url);

                        },
                        function(FPError){
                        console.log(FPError.toString());
                        }
                        );

    }

</script>

<script type="text/javascript" src="//api.filepicker.io/v1/filepicker.js"></script>


<div class="row margin" id='img-row'>
 <input id="filename" disabled="disabled" class="input-text file-input-value" type="text" style="width: 360px;" value=""/>
  <input name="img" data-fp-class="form-simple-action-btn filepicker_launcher" data-fp-button-text="Choose Image" data-fp-container="modal" type="filepicker" data-fp-apikey="MYKEYHERE" id='campaign-img-input' onclick="javascript:openFilePicker()">
 </div>

1 个答案:

答案 0 :(得分:1)

您似乎将filepicker.io widgets上的文档与filepicker.io javascript api的文档混合在一起。如果您想绑定到对象的onclick事件并直接使用filepicker.pick调用,则应使用标准按钮而不是filepicker输入类型,即

<button onclick="javascript:openFilePicker()">Choose Image</button>