PhoneGap 解析和上传文件

admin · 发表于 2013-7-29 13:06:58

几天后我如何解析的JavaScript API现在可以很容易地通过他们的SDK文件上传发布。内置的演示中，我是非常快速和简单，而使用phonegap的，这不是一个很好的例子的技术一起。PhoneGap的解析日（显然，影片将很快发布，我会分享，当他们）在我发言之前，我掀起了一个稍微更好的例子。让我们来看看。

（对不起）我的例子是应用程序的注意的另一个例子。然而，这一次，我已经添加了附加图片的能力的一个音符。主屏幕是您当前的票据上市，按日期排序。

点击加号的形式让你写一个新的笔记。

在这一点上，你可以选择拍摄照片。现在 - 我的iOS模拟器测试目的，我设置源到本地文件系统。在一个真实世界的应用程序，你会问，相机本身（或允许用户选择），但我想快速和肮脏的东西。

一旦你单击“保存”，然后创建一个新的注释对象解析。的代码，以确定是否已经拍摄了一张照片或不和，如果你有了，它将会为你处理上传。现在让我们看一下代码。

第一故乡-页。我使用jQuery Mobile的应用程序并放在“页”核心的index.html。由于似乎有一些混乱，让我绝对清楚。jQuery移动并没有让你使用一个HTML页面。期间。这一点，我有一个小的应用程序（2页）在类似的情况下，那么它是有道理的，我将它们包含在一个HTML文件。这是个人的选择，没有什么jQuery Mobile的强迫我做100％。

<! DOCTYPE html >
< html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script src="js/parse-1.2.8.min.js"></script>
<script src="js/app.js"></script>
<style>
div[data-role=content] img {
max-width: 200px;
}
</style>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<a href="#addNote" data-icon="plus" data-iconpos="notext" class="ui-btn-right">Add</a>
<h1>Notebook</h1>
</div>
<div data-role="content">
</div>
</div>
<div data-role="page" id="addNote">
<div data-role="header">
<a href="#home" data-icon="home" data-iconpos="notext">Home</a>
<h1>Notebook</h1>
</div>
<div data-role="content">
<h2>Add Note</h2>
<textarea id="noteText"></textarea>
<button id="takePicBtn">Add Pic</button>
<button id="saveNoteBtn">Save</button>
</div>
</div>
</body>
</html>

复制代码

这里的HTML是很空的，因为几乎所有的内容是动态的。现在，让我们来看看在app.js.

var parseAPPID = "supersecret";
var parseJSID = "mybankpinis1234";
//Initialize Parse
Parse.initialize(parseAPPID,parseJSID);
var NoteOb = Parse.Object.extend("Note");
$(document).on("pageshow", "#home", function(e, ui) {
$.mobile.loading("show");
var query = new Parse.Query(NoteOb);
query.limit(10);
query.descending("createdAt");
query.find({
success:function(results) {
$.mobile.loading("hide");
var s = "";
for(var i=0; i<results.length; i++) {
//Lame - should be using a template
s += "<p>";
s += "<h3>Note " + results[i].createdAt + "</h3>";
s += results[i].get("text");
var pic = results[i].get("picture");
if(pic) {
s += "<br/><img src='" + pic.url() + "'>";
}
s += "</p>";
}
$("#home div[data-role=content]").html(s);
},error:function(e) {
$.mobile.loading("hide");
}
});
});
$(document).on("pageshow", "#addNote", function(e, ui) {
var imagedata = "";
$("#saveNoteBtn").on("touchend", function(e) {
e.preventDefault();
$(this).attr("disabled","disabled").button("refresh");
var noteText = $("#noteText").val();
if(noteText == '') return;
/*
A bit complex - we have to handle an optional pic save
*/
if(imagedata != "") {
var parseFile = new Parse.File("mypic.jpg", {base64:imagedata});
console.log(parseFile);
parseFile.save().then(function() {
var note = new NoteOb();
note.set("text",noteText);
note.set("picture",parseFile);
note.save(null, {
success:function(ob) {
$.mobile.changePage("#home");
}, error:function(e) {
console.log("Oh crap", e);
}
});
cleanUp();
}, function(error) {
console.log("Error");
console.log(error);
});
} else {
var note = new NoteOb();
note.set("text",noteText);
note.save(null, {
success:function(ob) {
$.mobile.changePage("#home");
}, error:function(e) {
console.log("Oh crap", e);
}
});
cleanUp();
}
});
$("#takePicBtn").on("click", function(e) {
e.preventDefault();
navigator.camera.getPicture(gotPic, failHandler,
{quality:50, destinationType:navigator.camera.DestinationType.DATA_URL,
sourceType:navigator.camera.PictureSourceType.PHOTOLIBRARY});
});
function gotPic(data) {
console.log('got here');
imagedata = data;
$("#takePicBtn").text("Picture Taken!").button("refresh");
}
function failHandler(e) {
alert("ErrorFromC");
alert(e);
console.log(e.toString());
}
function cleanUp() {
imagedata = "";
$("#saveNoteBtn").removeAttr("disabled").button("refresh");
$("#noteText").val("");
$("#takePicBtn").text("Add Pic").button("refresh");
}
});

复制代码

先看一看＃家pageshow事件。这是我们得到的数据解析。这是通过一个简单的查询对象创建的订单。我限制数到10，如果我想可以添加分页。

的addNote逻辑是一个比较复杂的。保存解析数据是异步的，所以如果我们需要存储的文件有两个，而不是一个，异步调用。因此，大IF块来检查，如果我们已经有了选择现有的图像。说句实话，这可能是做了一些，也许更好。例如，创立初期注对象可以肯定IF子句，以及我行的text属性设置。但总的来说，我认为你的想法。

本文来自
http://www.raymondcamden.com/index.cfm/2013/7/23/Better-example-of-PhoneGap-Parse-and-uploading-files