如何告诉Filepicker从本机输入类型=" file"上传文件? [英] How to tell Filepicker to upload file from a native input type="file"?

查看:154
本文介绍了如何告诉Filepicker从本机输入类型=" file"上传文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

  • I managed to use Filepicker within the app.
  • I managed to use other uploader with native input: http://blueimp.github.io/jQuery-File-Upload/
  • What didn't manage though is to upload to Filepicker using native (for iOS6) input type="file"
<!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

Note: this code uses ChildBrowser plugin, you may want to follow these instructions: https://github.com/alunny/ChildBrowser/issues/28#issuecomment-15941458

加分:如何使用库 - https://gokercebeci.com/dev/canvasresize (用于客户端图像大小调整的插件)在使用虚假3G连接传输数据之前减少文件大小?

Extra points: how to use library like - https://gokercebeci.com/dev/canvasresize (plugin for client side image resizing) to reduce filesize before transmiting data using fleaky 3G connection?

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

Thank you in advance for any suggestions ans support.

推荐答案

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

You can use the filepicker.store function to store native input types, for instance:

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

这篇关于如何告诉Filepicker从本机输入类型=&quot; file&quot;上传文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆