PhoneGAP实现带进度条的文件上传（支持任意类型文件）

scdn

2013-02-04

由于公司的业务需要，要实现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);

上传的后台代码暂时不贴了，有需要的朋友可以留言。

phonegap html文件