您的位置：首页 > Web前端 > JavaScript

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

2014-04-04 18:14 411 查看

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



    

    <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);

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript phonegap upload

相关文章推荐

新的分享

章节导航