由於公司的業務需要，要實現PhoneGAP文件上傳並顯示進度條。一開始沒有仔細看PhoneGAP API就草草開工，後來通過logcat才發現，上傳過程中居然有動態刷新上傳的字節數據。頓時淚奔，我手動實現的上傳進度監聽啊，不過既然寫了，多少就有收穫，詳情見：http://blog.csdn.net/herestay/article/details/8567967
現在我們看看如何使用PhoneGAP自帶的功能實現上傳進度：
先是HTML
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" />
<link rel="stylesheet" href="css/base.css" />
<style type="text/css">
.upload_process_bar{
width:100%;
border:#ccc 1px solid;
height:6px;
padding:1px;
background:#fff;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
display:none;
}
.upload_current_process{
height:6px;
width:0%;
background:#A4C639;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
</style>
<title>文件上傳 - demo</title>
</head>
<body>
<h1><a href="javascript:void(0)" id="upload_file_link">選擇文件上傳</a></h1>
<!-- 上傳進度條 -->
<div class="upload_process_bar">
<div class="upload_current_process"></div>
</div>
<div id="process_info"></div>
<!-- 引用JS -->
<script src="scripts/jquery-1.8.3.min.js"></script>
<script src="scripts/cordova-2.2.0.js"></script>
<script src="scripts/upload/upload.js"></script>
</body>
</html>
jquery-1.8.3.min.js，cordova-2.2.0.js 這兩個文件就不貼了，自己去網上下載就好。
upload.js
/**FileTransfer*/
var ft;
/**
* 清除上傳進度，處理上傳失敗，上傳中斷，上傳成功
*/
function clearProcess() {
$('.upload_process_bar,#process_info').hide();
ft.abort();
};
/**
* 打開文件選擇器,並讓其支持所有文件的選擇。
*/
function openFileSelector() {
var source = navigator.camera.PictureSourceType.PHOTOLIBRARY;
//描述類型，取文件路徑
var destinationType = navigator.camera.DestinationType.FILE_URI;
//媒體類型，設置爲ALLMEDIA即支持任意文件選擇
var mediaType = navigator.camera.MediaType.ALLMEDIA;
var options={
quality : 50,
destinationType : destinationType,
sourceType : source,
mediaType : mediaType
};
navigator.camera.getPicture(uploadFile,uploadBroken,options);
};
/**
* 上傳意外終止處理。
* @param message
*/
function uploadBroken(message){
alert(message);
clearProcess();
};
/**
* 上傳過程回調，用於處理上傳進度，如顯示進度條等。
*/
function uploadProcessing(progressEvent){
if (progressEvent.lengthComputable) {
//已經上傳
var loaded=progressEvent.loaded;
//文件總長度
var total=progressEvent.total;
//計算百分比，用於顯示進度條
var percent=parseInt((loaded/total)*100);
//換算成MB
loaded=(loaded/1024/1024).toFixed(2);
total=(total/1024/1024).toFixed(2);
$('#process_info').html(loaded+'M/'+total+'M');
$('.upload_current_process').css({'width':percent+'%'});
}
};
/**
* 選擇文件後回調上傳。
*/
function uploadFile(fileURI) {
var options = new FileUploadOptions();
options.fileKey = "file";
options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1);
options.mimeType = "multipart/form-data";
options.chunkedMode = false;
ft = new FileTransfer();
var uploadUrl=encodeURI("http://192.168.1.170:8080/forum/upload/upload-file.html?t=1");
ft.upload(fileURI,uploadUrl,uploadSuccess, uploadFailed, options);
//獲取上傳進度
ft.onprogress = uploadProcessing;
//顯示進度條
$('.upload_process_bar,#process_info').show();
}
/**
* 上傳成功回調.
* @param r
*/
function uploadSuccess(r) {
alert('文件上傳成功:'+r.response);
clearProcess();
}
/**
* 上傳失敗回調.
* @param error
*/
function uploadFailed(error) {
alert('上傳失敗了。');
clearProcess();
}
/**
* 頁面實例化回調.
*/
document.addEventListener("deviceready", function(){
$(function(){
$('#upload_file_link').click(openFileSelector);
});
}, false);
上傳的後臺代碼暫時不貼了，有需要的朋友可以留言。