由于公司的业务需要,要实现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选择文件及上传文件插件实现,android studio工程,导入的时候请选择upload/platforms/android目录;选择文件兼容android6.0+闪退的情况,上传文件只是提交文件到服务器,服务器端的上传方法需要自己实现。
使用phoneGap 在android的file:///data/data/com.example.ark_test_write/lockfile.txt路径下将内容写入lockfile.txt文件
phonegap实现摇一摇拨打电话功能,摇一摇功能使用phonegap的加速计,拨打电话功能用使用了自定义的插件,phonegap版本是3.0的版本
自我实现的一个Phonegap实现离线功能,word文档
PhoneGap html5 拍照上传DEMO
实现android平台phonegap登录例子,内容简单,适合初学者.
phoneGap实现android程序开发代码
phonegap实现头像上传修改(php 与android代码)有说明文档。项目代码块,测试可使用。
基于android ,phonegap调用照相机拍照,图片保存
该例子主要简单的使用phonegap录音,并实现上传到服务器已经下载到手机客户端下
phonegap技术实现了指南针功能,界面跟iphone上的指南针一样,
PhoneGap实现手机表单和手机拍照多个图片上传功能以及...PhoneGap读取远程HTML文件,此HTML文件是普通的表单和实现手机多个图片拍照的页面(包含上传进度条),提交后保存在服务器上。具体看下载内容的readme.txt文件。
实现android平台phonegap实例,新闻客户端。 连接mysql数据库 附带web project 导入eclipse,把数据库连接改下就OK,数据库连接在config里面配置
1、结合iscroll动态ajax跨域加载数据2、结合iscroll上拉翻页3、图片上传4、phonegap控制双击返回退出程序5、增加离线浏览功能,实现文字及图片的缓存。6、增加清除缓存功能,包括清除文字和图片的缓存。7、增加开启...
phonegap在iphone手机上pushnotification实现 代码自己已经在真机测试实现 比较不错 顶.
sencha touch利用phonegap的file类接口开发android的文件浏览器,webapp的时代来临了。
使用phonegap调用android插件实现GPS实时定位
phonegap文件上传(Java,PHP)
5.3修改src文件下的java文件,把class extends 的activity改成DroidGap 5.4把 setContentView() line with super.loadUrl(“file:///android_asset/www/index.html”); 6. 打开AndroidManifest.xml,拷贝 ...