FileOpenPicker WP8.1 -如何

Question

我是windows开发的新手，我不得不使用phonegap/cordova将我的应用程序移植到上面。我的大部分代码都是为Android/iOS和winphone工作的，但是在这个FileOpenPicker上，我被屏蔽了。我正在使用winjs2.1，我想准备一个脚本，以便在需要此功能的页面中调用。

我读过大量的例子，我认为我已经接近解决方案了。

在我的html文件中我声明：

<script src="//Microsoft.Phone.WinJS.2.1/js/base.js"></script>
<script src="//Microsoft.Phone.WinJS.2.1/js/ui.js"></script>
<script type="text/javascript" src="js/default.js"></script>

这是我的default.js，我在页面中使用的文件，其中必须调用FileOpenPicker。

(function () {
"use strict";

var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;

app.onloaded = function (args) {
    var activationKind = args.detail.kind;

    document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);

    if (activationKind === Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation) {
        continueFileOpenPicker(options.activatedEventArgs);
    }           
};

function pickSinglePhoto() {
    // Clean scenario output 
    WinJS.log && WinJS.log("", "sample", "status");
    console.log("in pickSinglePhoto");

    // Create the picker object and set options 
    var openPicker = new Windows.Storage.Pickers.FileOpenPicker();
    openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;
    openPicker.suggestedStartLocation = Windows.Storage.Pickers.PickerLocationId.picturesLibrary;
    // Users expect to have a filtered view of their folders depending on the scenario. 
    // For example, when choosing a documents folder, restrict the filetypes to documents for your application. 
    openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

    // Open the picker for the user to pick a file 
    openPicker.pickSingleFileAndContinue();
}

// Called when app is activated from file open picker 
// eventObject contains the returned files picked by user 
function continueFileOpenPicker(eventObject) {
    console.log("in continueFileOpenPicker");
    var files = eventObject[0].files;
    var filePicked = files.size > 0 ? files[0] : null;
    if (filePicked !== null) {
        // Application now has read/write access to the picked file 
        WinJS.log && WinJS.log("Picked photo: " + filePicked.name, "sample", "status");
    } else {
        // The picker was dismissed with no selected file 
        WinJS.log && WinJS.log("Operation cancelled.", "sample", "status");
    }
}

app.start();
})();

不幸的是，这不起作用。我无法进入continueFileOpenPicker，因为标志activationKind总是未定义。我很确定我应该使用app.onactivated而不是app.onloaded，但在前一种情况下，我无法进入这个函数。

我已经尝试过函数pickSinglePhoto，它似乎很有效，但由于应用程序崩溃，我无法在选择后返回页面，显然是因为我不能在其他javascript文件中选择和使用该函数。

有线索吗？

Answer 1

我终于拿到了。这是我的工作解决方案，基于科多瓦相机插件JIRA问题(链接)的官方答案。

1. 使用官方相机插件Cordova (链接)
2. 主要文件: index.html，index.js，new.html，new.js，wp_get_image.js，utils.js。

首先，在index.html (我的主页)中，我声明了wp_get_image.js脚本：

<script type="text/javascript" src="js/localstoragedb.min.js"></script>
<script type="text/javascript" src="js/utils.js"></script>
<script type="text/javascript" src="js/wp_get_image.js"></script> 
<script type="text/javascript" src="js/index.js"></script>

请记住：

“简而言之，从图库中选择图片会导致应用程序挂起，直到图像被选中，然后继续使用开始页面(如config.xml中所定义的)。如果您从不同的页面调用了getPicture，这将导致整个应用程序重新加载并打开起始页面。此外，在这种情况下，对getPicture的回调也会被删除，因此您将永远不会从插件中获得任何结果。”

所以，我需要一个钩子在索引页，以拦截回调从相机成功。这是我的wp_get_image.js：

var goto_new_page_winphone = "";

(function () {
    "use strict";

    var app = WinJS.Application;
    var activation = Windows.ApplicationModel.Activation;

    app.onactivated = function (args) {

        if (args.detail.kind === activation.ActivationKind.launch) {
            var that = this;

            // Init:
            goto_new_page_winphone = "";
            localStorage.setItem("image_url_winphone", "");
        }

        if (args && args.detail.kind === activation.ActivationKind.pickFileContinuation) {
            continueFileOpenPicker(args);
        };

        args.setPromise(WinJS.UI.processAll().then(function () {
            // Text
        }));
    };

    function continueFileOpenPicker(eventObject) {

        console.log("in continueFileOpenPicker");
        var filePicked = eventObject.detail.files[0];
        var msgBox;
        if (filePicked !== null) {
            // Save filePicked.path in localstorage:
            localStorage.setItem("image_url_winphone", filePicked.path);
        } else {
            msgBox = new Windows.UI.Popups.MessageDialog("Operation cancelled.");
            msgBox.showAsync();
        }
        // Save back page:
        goto_new_page_winphone = read_backpage();
    };
app.start();
})();

我使用本地存储来保存图像url，使用局部变量来存储我来自的页面(我称之为new.html的页面)。read_backpage()函数是在我的utils.js文件中声明的，在该文件中，我跟踪用户访问的页面。所以，在我拍摄图片的new.html页面上的操作之后，系统会将我踢回索引页面。在那里，我需要读一下我来的那一页。所以在我的index.js里：

window.addEventListener("load", load, false);

function load() {
    if (device.platform != undefined) {
        var plat = device.platform;
        plat = plat.substring(0, 3);
        if (plat.toLowerCase() == "win") {
            if (goto_new_page_winphone && goto_new_page_winphone.length > 0) {
                window.location.href = goto_new_page_winphone;
            }
        }
    }
}

注意:流程是：$(document).ready in index.js -> app.onactivated in wp_get_image.js -> load in index.js。因此，不要将goto函数(window.location.href = goto_new_page_winphone)放在$(.ready)中，否则您将拥有var goto_new_page_winphone null，并且无法移动。

现在，您已经选择了new.html页面中的图片，返回到index.html，但现在您可以将应用程序重定向到声明为goto_new_page_winphone的页面(在我的例子中，该页面称为new.html)。

在new.js (与new.html相关的脚本)中，我获取图像的路径：

if (is_winphone) {
        var image_url = localStorage.getItem("image_url_winphone");
        if (image_url && image_url.length > 0) {
            upload_img("newprofile", image_url, function (urlimg) {
                // Reset localstorage var:
                localStorage.setItem("image_url_winphone", "");
                if (urlimg.length > 0) {
                    urlimg = urlimg.replace(/\\/g, '');
                    console.log(urlimg);
                    // Save remote url in my localstorage
                    wp_save_img_url(urlimg);
                }
            });
        }
    }

在我的例子中，我通过upload_img函数将图像发送到我的服务器，服务器回答使用我为我的目的保存的远程url。上传img是一个简单的功能，您可以在文件转换插件文档之后构建。

Answer 2

(function () {
"use strict";

var app = WinJS.Application;

app.onloaded = function (args) {

document.getElementById("btnSnap").addEventListener("click", pickSinglePhoto);
}

//This is where the app should validate the ActivationKind
app.onactivated = function ( args ) {

var value = args.detail.kind;

if (value ===     Windows.ApplicationModel.Activation.ActivationKind.pickFileContinuation)
{
continueFileOpenPicker(args);
}

}

function pickSinglePhoto() {

console.log("in pickSinglePhoto");

var openPicker = new Windows.Storage.Pickers.FileOpenPicker();

openPicker.viewMode = Windows.Storage.Pickers.PickerViewMode.thumbnail;

openPicker.suggestedStartLocation =     Windows.Storage.Pickers.PickerLocationId.picturesLibrary;

openPicker.fileTypeFilter.replaceAll([".png", ".jpg", ".jpeg"]);

openPicker.pickSingleFileAndContinue();

}


function continueFileOpenPicker(eventObject)
{
var imagen = eventObject.detail.files[0];

//whatch the properties of this object in the debuger
console.log(imagen.displayName);


}


app.start();
})();    

这个代码会对你有用的。