动态文件 picker.io 控件不起作用

Question

我已经在 Jquery 的按钮单击事件上创建了动态 FilePicker 控件但是此动态控件的按钮单击事件不会打开 filepicker.io 弹出窗口，其中文件上传到 filepicker...

下面是我在 jquery

中创建此控件所用的 html 代码

<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none">                                <button type="button" class="uploadImg btn border-blue-btn">Pick File</button>

Answer 1

您是否包含 filepicker.js 库？

请试试这个例子(link: https://jsfiddle.net/gy2gLvkw/)

<script type="text/javascript" src="//api.filepicker.io/v2/filepicker.js"></script>
<input type="filepicker" data-fp-apikey="Acdgfv0GWQXyMKwqVMfMHz" data-fp-mimetypes="image/*" data-fp-container="modal" data-fp-services="COMPUTER" class="uploadImg btn border-blue-btn" tabindex="31" style="display:none" onchange="alert(event.fpfile.url)">

我已将 onchange="alert(event.fpfile.url)" 添加到输入元素，以便在上传后显示 url。

Answer 2

Filepicker javascript 库在加载脚本后立即构建小部件。将 filepicker 与任何客户端渲染库一起使用需要手动调用

filepicker.constructWidget();

Dom 元素上的方法。您需要将元素类型设置为 'filepicker' 等

基本示例：

var input = $('<input>').attr({
    type: 'filepicker',
    class:'picker',
}).appendTo(config.results);

filepicker.constructWidget(input);

以及完整的工作示例：

http://jsfiddle.net/krystiangw/hfg6k8u2/

动态文件 picker.io 控件不起作用

dynamic file picker.io control doesn't work

filepicker.io