摩刻部落

一個呆子的網站

  • Home

PhoneGap:檔案同步

2015-04-23 by Davina 0 Comments

在前面兩篇 檔案存取(一) 以及 檔案存取(二) 已經說明如何將使用者資訊儲存至檔案(純文字文件)中。不過這些檔案若只是存在本機端,也沒有什麼義意,必須使用檔案同步(FileTransfer)將檔案上傳至伺服器。相較於 FileSystem,FileTransfer 簡單很多,不過必須額外撰寫 Server 端的程式(本篇使用PHP)。詳細的說明內容可以參考官方網站。

載入 API
FileTransfer 和 FileSystem 一樣,必須在 deviceready 事件觸發之後才能作用(參考檔案存取(一))。另外也別忘了在 HTML 網頁裡載入 cordova.js (參考PhoneGap建置)。

	<gap:plugin name="org.apache.cordova.device" />
	<gap:plugin name="org.apache.cordova.file" />
	<gap:plugin name="org.apache.cordova.file-transfer" />

<gap:plugin name="org.apache.cordova.device" /> <gap:plugin name="org.apache.cordova.file" /> <gap:plugin name="org.apache.cordova.file-transfer" />

上傳檔案
上傳檔案的呼叫,一般來說會配合按鈕,或是 FileSystem 的檔案列表,不會直接在 deviceready 後執行。不過為了提醒讀者要確保 deviceready 已經呼叫,所以下面的程式碼把 uploadFile() 寫在 onDeviceReady() 中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
	//在deviceready之後才能進行同步
	//uploadFile(filepath);		//filepath為上傳檔案的路徑
}
function uploadFile(filepath) {
	var options = new FileUploadOptions();
	options.fileName = "newFileName.txt";	//儲存至Server端的檔案名稱
	options.mimeType = "text/plain";	//預設值為image/jpeg
 
	var params = {};	//設定上傳參數
	params.key = "value";	//設定參數key與value
	options.params = params;
 
	var ft = new FileTransfer();
	ft.upload(filepath, encodeURI("http://www.moke.tw/saveFile.php"),
		function(r) {	//上傳成功
			console.log("Code = " + r.responseCode);
			console.log("Response = " + r.response);
		}, function(error) {	//上傳失敗
			alert("An error has occurred: Code = " + error.code);
	}, options);
}

document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { //在deviceready之後才能進行同步 //uploadFile(filepath); //filepath為上傳檔案的路徑 } function uploadFile(filepath) { var options = new FileUploadOptions(); options.fileName = "newFileName.txt"; //儲存至Server端的檔案名稱 options.mimeType = "text/plain"; //預設值為image/jpeg var params = {}; //設定上傳參數 params.key = "value"; //設定參數key與value options.params = params; var ft = new FileTransfer(); ft.upload(filepath, encodeURI("http://www.moke.tw/saveFile.php"), function(r) { //上傳成功 console.log("Code = " + r.responseCode); console.log("Response = " + r.response); }, function(error) { //上傳失敗 alert("An error has occurred: Code = " + error.code); }, options); }

上面第 16 行的 saveFile.php 並不存在,必須自行撰寫放在 Server 端(這裡只是表示 Server 的網址)。接收檔案的程式不一定要用 PHP,選擇自己方便的即可。下面是 PHP 接收檔案的參考語法,第 1 行的 $path 是上傳目錄,預設為根目錄。

1
2
3
4
5
6
7
8
9
10
11
$path = "";
if( $_FILES["file"] != null ) {
	if( $_FILES["file"]["error"] > 0 ) {
		echo "上傳錯誤。Error code: " . $_FILES["file"]["error"];
	}
	else {
		if(!is_dir($path)) mkdir($path, 0755, true);	//如果目錄不存在,建立目錄
		move_uploaded_file($_FILES["file"]["tmp_name"], $path . $_FILES["file"]["name"]);
		echo "done";	//輸出成功上傳的識別字串
	}
}

$path = ""; if( $_FILES["file"] != null ) { if( $_FILES["file"]["error"] > 0 ) { echo "上傳錯誤。Error code: " . $_FILES["file"]["error"]; } else { if(!is_dir($path)) mkdir($path, 0755, true); //如果目錄不存在,建立目錄 move_uploaded_file($_FILES["file"]["tmp_name"], $path . $_FILES["file"]["name"]); echo "done"; //輸出成功上傳的識別字串 } }

下載檔案
下載檔案是把檔案從 Server 端下載,儲存至 Client 端。它的重點只有二個,Server 端檔案位置,以及 Client 端想要儲存到那裡。參考下面的程式碼,第 1 至 15 行完全就是檔案存取(一)的內容,它的目的只是為了讓第 1 行的 filesystem 物件有內容,可以讀取 Client 端的檔案位置。第 16 行開始才是 FileTransfer 下載檔案的主要程式碼。取得 Server 端的檔案路徑與檔名後,透過 filesystem.root.toURL() 取得 Client 端的存取路徑,剩下的就是下載成功與失敗的處理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var filesystem = null;
 
document.addEventListener("deviceready", onDeviceReady, false);
 
function onDeviceReady() {
	window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem;
 
	if (window.requestFileSystem) {
		window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024 * 5 , function(fs) {
			filesystem = fs;
		}, errorHandler);
	} else {
		alert("Sorry! Your browser doesn\'t support the FileSystem API :(");
	}
}
function fileDownload(fileURL) {	//fileURL為Server端的檔案路徑
	var fileName = fileURL.substr(fileURL.lastIndexOf('/')+1);	//取得檔名
 
	var ft = new FileTransfer();
	ft.download(encodeURI(fileURL), filesystem.root.toURL() + fileName,
		function(entry) {	//下載成功
			console.log("download complete: " + entry.toURL());
		}, function(error) {	//下載失敗
			console.log("upload error code" + error.code);
	});
}

var filesystem = null; document.addEventListener("deviceready", onDeviceReady, false); function onDeviceReady() { window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; if (window.requestFileSystem) { window.requestFileSystem(LocalFileSystem.PERSISTENT, 1024 * 1024 * 5 , function(fs) { filesystem = fs; }, errorHandler); } else { alert("Sorry! Your browser doesn\'t support the FileSystem API :("); } } function fileDownload(fileURL) { //fileURL為Server端的檔案路徑 var fileName = fileURL.substr(fileURL.lastIndexOf('/')+1); //取得檔名 var ft = new FileTransfer(); ft.download(encodeURI(fileURL), filesystem.root.toURL() + fileName, function(entry) { //下載成功 console.log("download complete: " + entry.toURL()); }, function(error) { //下載失敗 console.log("upload error code" + error.code); }); }

Client 端的儲存路徑類似 cdvfile://localhost/persistent/path/to/downloads/,由於不同機種的儲存路徑不太一樣,所以建議還是用 filesystem 讀取APP的根目錄再做儲存比較好。

Categories 進階程式設計 Tags: HTML5, PhoneGap

友善列印 友善列印
Share on Google+

About Davina

See all the posts by Davina at this link.

發表迴響 取消回覆

你的電子郵件位址並不會被公開。 必要欄位標記為 *

驗證碼 * Time limit is exhausted. Please reload CAPTCHA.

摩刻部落 moke.tw
摩刻部落

文章分類


本站所有公開文章皆適用以下授權:
Creative Commons License

標籤雲

Android AR擴增實境 C C++ CSS CSS3 facebook Flash Google HTML HTML5 Java JavaScript jQuery Mobile Kendo UI meMoke PhoneGap Unreal VB.NET WordPress 台南 小吃 屏東 攝影 教育 數位學習 日劇 時間管理 演算法 漫畫 知識管理 筆記 網站架設 網際網路 軟體應用 遊戲 電影 餐廳 點子

其它

  • 註冊
  • 登入
  • 文章 RSS 訂閱
  • 迴響 RSS 訂閱
  • WordPress 台灣正體中文

近期文章

  • 摩刻部落閉幕式
  • meMoke:製作4000+的SVG圖示檔
  • PhoneGap Plugin(4):原生插件常用物件與JS函式呼叫
  • meMoke:記錄每一天的待辦事情
  • 如何反省

近期迴響

  • Davina 在 Android開發筆記-GPS與網路定位
  • 網頁設計 在 Android開發筆記-GPS與網路定位
  • Davina 在 PhoneGap:用HTML5製作APP
  • Davina 在 基礎程式設計(25)-陣列
  • 孫守真 在 基礎程式設計(25)-陣列

Copyright © 2018 ~ 摩刻部落 ~ The Funk
Proudly powered by WordPress