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

最新推荐文章于 2016-02-23 17:52:31 发布

TheIndustryArooki

最新推荐文章于 2016-02-23 17:52:31 发布

阅读量1.2k

点赞数

分类专栏： PhoneGap java 文章标签： javascript phonegap upload

本文链接：https://blog.csdn.net/goolejuck/article/details/22952913

版权

java 同时被 2 个专栏收录

40 篇文章 0 订阅

订阅专栏

PhoneGap

1 篇文章 0 订阅

订阅专栏

由于公司的业务需要，要实现PhoneGAP文件上传并显示进度条。一开始没有仔细看PhoneGAP API就草草开工，后来通过logcat才发现，上传过程中居然有动态刷新上传的字节数据。顿时泪奔，我手动实现的上传进度监听啊，不过既然写了，多少就有收获，详情见：http://blog.csdn.net/herestay/article/details/8567967

现在我们看看如何使用PhoneGAP自带的功能实现上传进度：

先是HTML

[html]view plaincopy 
   
 <!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

[javascript]view plaincopy 
   
 /**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);  