由于公司的业务需要，要实现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提供了一个方便的接口来实现跨平台的文件操作，让Web开发者能够利用熟悉的Web技术来开发具有文件操作功能的移动应用。在实际开发中，应确保遵循各平台的文件系统规范和权限管理，以及处理可能出现...
phonegap选择文件及上传文件插件实现，android studio工程，导入的时候请选择upload/platforms/android目录；选择文件兼容android6.0+闪退的情况，上传文件只是提交文件到服务器，服务器端的上传方法需要自己实现。
这个“PhoneGap-拍照上传DEMO”是一个示例项目，展示了如何利用PhoneGap和HTML5的技术实现拍照并上传的功能。在深入讲解这个DEMO之前，我们先理解一下PhoneGap和HTML5的关键特性。 PhoneGap是基于Apache Cordova的...
服务器端通常需要支持文件上传的接口，例如使用PHP、Node.js或其他后端语言实现。 “下载到手机客户端”则是相反的过程，使用FileTransfer的download方法，指定远程文件的URL和本地存储的路径。PhoneGap会处理下载...
在这个“phoneGap实现android平台登录例子”中，我们将探讨如何利用PhoneGap在Android平台上创建一个简单的登录功能，这对于初学者来说是一个很好的入门实践。 首先，我们需要了解PhoneGap的基础知识。PhoneGap是...
综上所述，通过Sencha Touch和PhoneGap的结合，我们可以构建出一款功能完善的Android文件浏览器，充分利用Web技术的优势，实现跨平台的文件管理功能。这个项目的实现涉及到前端开发、移动应用开发以及文件系统操作等...
在这个特定的场景中，我们要探讨的是如何在PhoneGap 3.0版本上实现“摇一摇”功能来拨打电话。 首先，我们要理解PhoneGap的核心原理：通过WebView将Web应用包装成原生的移动应用，利用JavaScript接口调用设备的API...
2. **FileTransfer对象**：PhoneGap提供了FileTransfer对象，用于上传和下载文件。通过这个对象，开发者可以指定源URL、目标文件路径，以及设置HTTP请求头，从而实现文件的网络传输。 3. **AJAX请求**：在...
本主题将深入探讨如何使用PhoneGap，结合PHP和Android代码实现头像上传与修改功能。 首先，我们需要理解PhoneGap的运行机制。PhoneGap通过封装设备API，使得Web应用可以访问设备的功能，如摄像头、文件系统、网络等...
5. **保存图片到应用目录**：PhoneGap提供`File`和`FileTransfer`对象，用于处理文件操作。你可以使用`window.resolveLocalFileSystemURL`获取到图片的文件对象，然后使用`FileWriter`写入到应用的私有目录。这样，...
5. **测试和调试**：确保在实际设备上进行测试，因为模拟器可能不支持所有文件类型的打开。使用Chrome开发者工具或平台特定的调试工具来追踪任何可能出现的问题。 在`FileOpener`压缩包中，可能包含的是这个插件的...
PhoneGap通常不直接支持MySQL连接，但可以通过使用Cordova插件如`cordova-plugin-mysql`来实现。安装插件后，在JavaScript代码中编写数据库操作，如连接、查询和更新。 5. **设计UI**：使用HTML和CSS创建新闻客户端...
《使用PhoneGap实现离线功能的技术探索》 PhoneGap，一个强大的跨平台移动应用开发框架，以其独特的HTML、CSS和JavaScript技术，让开发者能够轻松构建原生移动应用。在许多情况下，尤其是对于那些需要在无网络环境...
在这个“phoneGap实现android程序开发代码”中，我们将探讨如何使用PhoneGap进行Android应用开发。 首先，我们需要安装PhoneGap的开发环境。这包括安装Java Development Kit (JDK)，Android SDK，以及集成开发环境...
在"自定义plugin插件实现phonegap与Android交互"这个主题中，我们主要关注的是如何通过编写自定义插件来打通JavaScript和Android之间的通信壁垒。在PhoneGap中，Plugin是连接Web层和Native层的桥梁，它们是用Java...
1. "深入浅出 phonegap 代码.zip" - 这个文件可能是关于PhoneGap的教程或者示例代码，包含了深入讲解PhoneGap使用方法的代码示例，可以帮助初学者理解PhoneGap的工作原理和实践应用。 2. "ionic-1.1.zip" - 这是...
总的来说，PhoneGap 2.9.1是一个历史版本，但它展示了PhoneGap跨平台开发的核心理念和早期实现方式。随着技术的发展，PhoneGap不断改进，以适应不断变化的移动开发需求。尽管有其局限性，但PhoneGap依然是许多开发者...
PhoneGap头像裁剪上传是移动应用开发中的一个常见需求，尤其在社交、个人资料设置等场景下。PhoneGap是一个开源框架，它允许开发者使用...通过研究这些文件，你可以更好地理解和实现PhoneGap应用中的头像裁剪上传功能。
在PhoneGap 2.0中，开发者需要确保视频文件是Android设备支持的格式，如MP4（H.264编码），并且适应设备的屏幕尺寸和分辨率。 为了在Android真机上运行这个视频播放实例，开发者需要做以下几步： 1. **环境准备**...