使用PhoneGap下载文件并在AngularJS中使用

时间:2014-06-02 12:42:37

标签: javascript android ios angularjs cordova

我正在使用AngularJS构建PhoneGap / Cordova应用程序。我花了很多时间来了解如何成功地将远程文件下载到设备。这是我的代码:

download: function() {
    console.log('start download');
    var remoteFile = "http://remoteserver.domain";
    var localFileName = "file.json";

    window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
        fileSystem.root.getFile(localFileName, {create: true}, function(fileEntry) {
            var localPath = fileEntry.toURL();
            var ft = new FileTransfer();
            ft.download(remoteFile,
                localPath, 
                function(entry){console.log(entry)}, 
                function(error){console.log(error.code)}
            );
        }, function(error){console.log(error.code)});
    }, function(error){console.log(error.code)});
}

对于iOS,FileSystem API返回的文件的本机路径是我的应用程序的Documents文件夹。但是因为我使用的是AngularJS并且它在Appname.app文件夹中的www文件夹中运行,所以我不知道如何从AngularJS访问该文件,这样它也可以在Android和其他操作系统支持的情况下开箱即用。 PhoneGap的。

所以我要做的是告诉File API将文件保存在 Appname.app/www 文件夹中,或告诉AngularJS使用 ../ Documents / 文件夹,但不是特定于平台的。也许我可以使用完全不同的解决方案?

3 个答案:

答案 0 :(得分:1)

我们在我们的应用程序中实现了类似的功能,下面的代码会让您了解它

    $rootScope.download = function(ii,catalogs)
{
    var len = catalogs.length;
    if(ii==len)
    {
        localStorage.setItem("catalogdwnld", 1);

            if($rootScope.loadingmodal){
                $rootScope.loadingmodal.opened.then(function () {
                  $rootScope.loadingmodal.dismiss( "cancel" );
            });

        }

    }
    else if(ii < catalogs.length){


    var id = catalogs[ii].id;

    /**/

        if(catalogs[ii].parentId==0)
        {
            window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, fileSystemSuccess, fileSystemFail);
                function fileSystemSuccess(fileSystem) {
                var directoryEntry = fileSystem.root; // to get root path to directory
                            directoryEntry.getDirectory("catalogs", {create: true, exclusive: false}, onDirectorySuccess, onDirectoryFail);
                            // root directory path
                            var rootdir = fileSystem.root;
                            var fp = rootdir.toURL();
                            // storing images in catalogs folder
                            fp = fp+"/catalogs/"+id+".png";

                            var fileTransfer = new FileTransfer();

                            fileTransfer.download($window.service_url+"/catalog/cover/"+id+"",fp,  
                                function(entry) {
                                        var native_url = entry.toNativeURL();
                                /*****  Store it in db *******/ 

                                },
                                function(error) {
                                    navigator.notification.alert(
                                    'Download failed, please try again',
                                    null,         
                                    'Download Failed',   
                                    'OK');


                                }
                            );
                }
        }
}

获取可以使用的根目录路径,

fileSystem.root;

我们在db中存储本机路径,以便稍后可以使用它来显示图像。如果你没有让你的应用程序离线,那么你可以使用html4 \ 5 localstorage。

我们在android和ios上测试了上面的代码,因此它在平台上进行了调整。

谢谢..

答案 1 :(得分:0)

还有用于在Cordova下载文件的ng服务。使用cordova文件api。在Android和iOS上测试过。提供下载单个文件或文件数组的方法。

https://github.com/verico/ng-cordova-file-downloader

答案 2 :(得分:0)

此AngularJS模块使用cordova文件API,不需要文件传输插件。您可以创建多个队列来下载文件,并在文件下载后执行任何操作,并且记录得很清楚。

downgularJS - https://github.com/kaikcreator/downgularJS