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

Stella981
• 阅读 674

由于公司的业务需要,要实现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);

上传的后台代码暂时不贴了,有需要的朋友可以留言。

点赞
收藏
评论区
推荐文章
blmius blmius
3年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Immortal Immortal
3年前
vue项目中使用element-ui实现excel表格上传
恰逢项目中要实现excel表格上传,度娘甚久,得此一文,留之。原文:https://blog.csdn.net/qq36718999/article/details/95387542需求vuecli搭建前端项目,并使用elementui实现本地excel表格上传。(1)限制上传文件只能是xls、xlsx格式;(2)限制上传文件大小不能超过2MB
Easter79 Easter79
3年前
vue+element UI + axios封装文件上传及进度条组件
1.前言之前在做项目的时候,需要实现一个文件上传组件并且需要有文件上传进度条,现将之前的实现过程简单记录一下,希望可以帮助到有需要的人。项目用的是Vue框架,UI库使用的是elementUI,前后端交互请求使用的是Vue官方推荐的axios。其中,UI方面主要使用了elementUI库中的Upload文件上传组件、Progress
待兔 待兔
3个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
3年前
struts2框架实现上传文件进度条功能
      1.在实现上传进度条功能中,主要是的思想是利用struts2中定义的ProgressListener(进度监听器),里面有一个update(longreadedBytes,longtotalBytes,intcurrentItem)方法,当文件用二进制文件来进行上传时,每上传一部分数据都会去调用这个update方法,update中得到s
Stella981 Stella981
3年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Stella981 Stella981
3年前
Spring MVC 监听文件上传进度,实现上传进度条
首先Spring是一个非常成熟的J2EE框架,其非入侵式的架构为系统的集成和扩展提供了最大的可能。所以SpringMVC下实现进度监听非常容易,甚至不需要改以前的上传业务代码,具体实现分三个步骤:1、接管CommonsMultipartResolver,重写针对文件上传的请求。2、在第一步中写入监听,以获取上传进度。3、修改上传部分的配置
Wesley13 Wesley13
3年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Wesley13 Wesley13
3年前
Java多线程导致的的一个事物性问题
业务场景我们现在有一个类似于文件上传的功能,各个子站点接受业务,业务上传文件,各个子站点的文件需要提交到总站点保存,文件是按批次提交到总站点的,也就是说,一个批次下面约有几百个文件。      考虑到白天提交这么多文件会影响到子站点其他系统带宽,我们将分站点的文件提交到总站点这个操作过程独立出来,放到晚上来做,具体时间是晚上7:00到早上7:00。
Python进阶者 Python进阶者
9个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这