其他分享
首页 > 其他分享> > PhoneGAP实现带进度条的文件上传（支持任意类型文件）

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

作者：互联网


先是HTML

[html]       view plain    copy    print   ?  

  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>  
  47.   

jQuery-1.8.3.min.js，cordova-2.2.0.js 这两个文件就不贴了，自己去网上下载就好。




upload.js

[javascript]       view plain    copy    print   ?  

  1. /**FileTransfer*/  
  2. var ft;  
  3.   
  4. /** 
  5.  * 清除上传进度，处理上传失败，上传中断，上传成功 
  6.  */  
  7. function clearProcess() {  
  8.     $('.upload_process_bar,#process_info').hide();  
  9.     ft.abort();  
  10. };  
  11.   
  12. /** 
  13.  * 打开文件选择器,并让其支持所有文件的选择。 
  14.  */  
  15. function 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.  */  
  34. function uploadBroken(message){  
  35.     alert(message);  
  36.     clearProcess();  
  37. };  
  38.   
  39. /** 
  40.  * 上传过程回调，用于处理上传进度，如显示进度条等。 
  41.  */  
  42. function 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.  */  
  62. function 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.  */  
  81. function uploadSuccess(r) {  
  82.     alert('文件上传成功:'+r.response);  
  83.     clearProcess();  
  84. }  
  85.   
  86. /** 
  87.  * 上传失败回调. 
  88.  * @param error 
  89.  */  
  90. function uploadFailed(error) {  
  91.     alert('上传失败了。');  
  92.     clearProcess();  
  93. }  
  94.   
  95. /** 
  96.  * 页面实例化回调. 
  97.  */  
  98. document.addEventListener("deviceready", function(){  
  99.     $(function(){  
  100.          $('#upload_file_link').click(openFileSelector);  
  101.     });  
  102. }, false); 


标签：function,文件,进度条,PhoneGAP,upload,process,var,上传,options
来源： https://blog.51cto.com/u_12198094/2698026