【问题标题】：How to tell Filepicker to upload file from a native input type="file"?如何告诉 Filepicker 从本地输入 type="file" 上传文件？
【发布时间】：2013-04-08 00:37:06
【问题描述】：

任务：PhoneGap 应用程序将照片上传到文件选择器。

我设法在应用程序中使用了 Filepicker。
我设法使用其他带有本机输入的上传器：http://blueimp.github.io/jQuery-File-Upload/
虽然没有管理的是使用本机（适用于 iOS6）input type="file" 上传到 Filepicker

<!DOCTYPE html>
<html>
    <head>
        <title>Filepicker PhoneGap iOS6</title>
    </head>

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="ChildBrowser.js"></script>
    <script type="text/javascript" src="filepicker.js"></script>
    <script type="text/javascript">

    function useFilepicker() {
        /* snippet from: http://stackoverflow.com/questions/13369249/filepicker-io-with-phone-gap-on-ios/14525181#14525181 */      
        cb = window.plugins.childBrowser;
        if(cb!=null){
            cb.onLocationChange = function(loc){
                if (loc != "about:blank"){
                    console.log(loc);
                    if(loc.indexOf("fpurl") > -1) {
                        cb.close();
                    }
                    var n = loc.split("fpurl=");
                    fpurl = n[1];
                    alert(fpurl);
                }
            };
            cb.showWebPage("https://www.filepicker.io/dialog/open/?m=image/*&key=______YOUR_KEY_HERE______&referrer=&modal=false&redirect_url=https://www.filepicker.io/dialog/phonegap_done/");
        }
    }

    $(function(){
     $("input#file").on("change", function() {
        ("textarea#base64").val($(this).val());

        /* _____WHAT TO PUT HERE_____ */

     });
    });

    </script>

    <body>
    <h3>function calling Filepicker API</h3>
    <a href="#" onClick="useFilepicker(); return false">Use Filepicker</a> 
    <!-- this works, but user experience suffers - I don't want to open extra window, I would like to have take photo / choose existing -->


    <h3>input type=&quot;filepicker&quot;</h3>
    <input type="filepicker"/>
    <!-- Doesn't work, created issue here: https://github.com/Filepicker/filepicker-phonegap/issues/1 -->

    <h3>input type=&quot;file&quot;</h3>
    <form action="_____WHAT TO PUT HERE_____">
        <input id="file" type="file"/>
    </form>
    <textarea id="base64">Here c:/fakepath/image.jpg path with be</textarea>

    </body>
</html>

注意：此代码使用 ChildBrowser 插件，您可能需要按照以下说明操作：https://github.com/alunny/ChildBrowser/issues/28#issuecomment-15941458

加分项：如何使用库如 - https://gokercebeci.com/dev/canvasresize （用于客户端图像大小调整的插件） 在使用不稳定的 3G 连接传输数据之前减小文件大小？ p>

提前感谢您的任何建议和支持。

【问题讨论】：

标签： cordova ios6 mobile-safari filepicker.io

【解决方案1】：

您可以使用filepicker.store 函数来存储本机输入类型，例如：

var input = document.getElementById("my-file-input");
filepicker.store(input, {location:'S3'}, function(fpfile){
    console.log(JSON.stringify(fpfile));
});

【讨论】：

【解决方案2】：

这是一个可以工作的最小 sn-p（上传大照片需要时间，而且没有进度条，所以请耐心等待）

<!DOCTYPE html>
<html>
    <head>
        <title>Filepicker PhoneGap iOS6</title>
    </head>

    <script type="text/javascript" src="cordova-2.2.0.js"></script>
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="filepicker.js"></script>
    <script type="text/javascript">

    filepicker.setKey('l5uQ3k7FQ5GoYCHyTdZV'); // No worries: used filepicker's

    $(function(){

     $("input#file").on("change", function() {

        filepicker.store(this, {location:'S3'}, function(fpfile){

            $("<a>", {
                href: fpfile.url,
                text: "See me!"
            }).appendTo("body");

        });
     });
    });
   </script>

    <body>
        <input id="file" type="file"/>
    </body>
</html>

【讨论】：