0

タスク: 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 (クライアント側の画像サイズ変更用プラグイン) のようなライブラリを使用して、fleaky 3G 接続を使用してデータを送信する前にファイルサイズを縮小する方法は?

提案やサポートをお寄せいただきありがとうございます。

4

2 に答える 2

1

関数を使用して、filepicker.storeネイティブ入力タイプを保存できます。たとえば、次のようになります。

var input = document.getElementById("my-file-input");
filepicker.store(input, {location:'S3'}, function(fpfile){
    console.log(JSON.stringify(fpfile));
});
于 2013-04-08T06:00:41.533 に答える
0

これは機能する最小限のスニペットです（大きな写真のアップロードには時間がかかり、進行状況バーがないため、しばらくお待ちください）

<!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>
于 2013-04-08T22:40:15.603 に答える