由于公司的业务需要，要实现PhoneGAP文件上传并显示进度条。一开始没有仔细看PhoneGAP API就草草开工，后来通过logcat才发现，上传过程中居然有动态刷新上传的字节数据。顿时泪奔，我手动实现的上传进度监听啊，不过既然写了，多少就有收获，详情见：http://blog.csdn.net/herestay/article/details/8567967
现在我们看看如何使用PhoneGAP自带的功能实现上传进度：
先是HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 5<meta name="format-detection" content="telephone=no" /> 6<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, width=device-width" /> 7<link rel="stylesheet" href="css/base.css" /> 8<style type="text/css"> 9.upload_process_bar{ 10 width:100%; 11 border:#ccc 1px solid; 12 height:6px; 13 padding:1px; 14 background:#fff; 15 -moz-border-radius:10px; 16 -webkit-border-radius:10px; 17 border-radius:10px; 18 display:none; 19} 20.upload_current_process{ 21 height:6px; 22 width:0%; 23 background:#A4C639; 24 -moz-border-radius:10px; 25 -webkit-border-radius:10px; 26 border-radius:10px; 27} 28</style> 29<title>文件上传 - demo</title> 30</head> 31<body> 32 <h1><a href="javascript:void(0)" id="upload_file_link">选择文件上传</a></h1> 33 34 <!-- 上传进度条 --> 35 <div class="upload_process_bar"> 36 <div class="upload_current_process"></div> 37 </div> 38 <div id="process_info"></div> 39 40 <!-- 引用JS --> 41 <script src="scripts/jquery-1.8.3.min.js"></script> 42 <script src="scripts/cordova-2.2.0.js"></script> 43 <script src="scripts/upload/upload.js"></script> 44 45</body> 46</html>
jquery-1.8.3.min.js，cordova-2.2.0.js 这两个文件就不贴了，自己去网上下载就好。
upload.js
1/**FileTransfer*/ 2var ft; 3 4/** 5 * 清除上传进度，处理上传失败，上传中断，上传成功 6 */ 7function clearProcess() { 8 $('.upload_process_bar,#process_info').hide(); 9 ft.abort(); 10}; 11 12/** 13 * 打开文件选择器,并让其支持所有文件的选择。 14 */ 15function openFileSelector() { 16 var source = navigator.camera.PictureSourceType.PHOTOLIBRARY; 17 //描述类型，取文件路径 18 var destinationType = navigator.camera.DestinationType.FILE_URI; 19 //媒体类型，设置为ALLMEDIA即支持任意文件选择 20 var mediaType = navigator.camera.MediaType.ALLMEDIA; 21 var options={ 22 quality : 50, 23 destinationType : destinationType, 24 sourceType : source, 25 mediaType : mediaType 26 }; 27 navigator.camera.getPicture(uploadFile,uploadBroken,options); 28}; 29 30/** 31 * 上传意外终止处理。 32 * @param message 33 */ 34function uploadBroken(message){ 35 alert(message); 36 clearProcess(); 37}; 38 39/** 40 * 上传过程回调，用于处理上传进度，如显示进度条等。 41 */ 42function uploadProcessing(progressEvent){ 43 44 if (progressEvent.lengthComputable) { 45 //已经上传 46 var loaded=progressEvent.loaded; 47 //文件总长度 48 var total=progressEvent.total; 49 //计算百分比，用于显示进度条 50 var percent=parseInt((loaded/total)*100); 51 //换算成MB 52 loaded=(loaded/1024/1024).toFixed(2); 53 total=(total/1024/1024).toFixed(2); 54 $('#process_info').html(loaded+'M/'+total+'M'); 55 $('.upload_current_process').css({'width':percent+'%'}); 56 } 57}; 58 59/** 60 * 选择文件后回调上传。 61 */ 62function uploadFile(fileURI) { 63 var options = new FileUploadOptions(); 64 options.fileKey = "file"; 65 options.fileName = fileURI.substr(fileURI.lastIndexOf('/') + 1); 66 options.mimeType = "multipart/form-data"; 67 options.chunkedMode = false; 68 ft = new FileTransfer(); 69 var uploadUrl=encodeURI("http://192.168.1.170:8080/forum/upload/upload-file.html?t=1"); 70 ft.upload(fileURI,uploadUrl,uploadSuccess, uploadFailed, options); 71 //获取上传进度 72 ft.onprogress = uploadProcessing; 73 //显示进度条 74 $('.upload_process_bar,#process_info').show(); 75} 76 77/** 78 * 上传成功回调. 79 * @param r 80 */ 81function uploadSuccess(r) { 82 alert('文件上传成功:'+r.response); 83 clearProcess(); 84} 85 86/** 87 * 上传失败回调. 88 * @param error 89 */ 90function uploadFailed(error) { 91 alert('上传失败了。'); 92 clearProcess(); 93} 94 95/** 96 * 页面实例化回调. 97 */ 98document.addEventListener("deviceready", function(){ 99 $(function(){ 100 $('#upload_file_link').click(openFileSelector); 101 }); 102}, false);
上传的后台代码暂时不贴了，有需要的朋友可以留言。