任务：将照片上传到filepicker的PhoneGap应用程序。

Question

任务：将照片上传到filepicker的PhoneGap应用程序。

我设法在应用程序中使用Filepicker。
我设法使用原生输入的其他上传器：http://blueimp.github.io/jQuery-File-Upload/
无法管理的是使用原生（iOS6）上传到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

额外点：如何使用像{ - 3}} （用于客户端图像大小调整的插件）这样的库来减少文件大小，以便在使用疯狂的3G连接传输数据之前？

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

Answer 1

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

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

Answer 2

这是一个最小的代码片段（上传大型照片需要时间，而且没有进度条，所以请耐心等待）

<!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>

如何告诉Filepicker从本机输入type =“file”上传文件？

任务：将照片上传到filepicker的PhoneGap应用程序。

2 个答案: