0

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

  • 我设法在应用程序中使用 Filepicker。
  • 我设法使用带有本机输入的其他上传器：http: //blueimp.github.io/jQuery-File-Upload/
  • 但是没有管理的是使用本机（对于iOS6）输入类型=“文件”上传到文件选择器
<!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 连接传输数据之前减小文件大小？

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

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 回答