您的位置：首页 > 其它

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

2016-11-29 11:17 239 查看

博客地址：http://blog.csdn.net/herestay/article/details/8569648?utm_source=tuicool&utm_medium=referral

先是HTML

[html] view
plain copy print ?

<!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;
4000

    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
plain copy print ?

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

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

标签：

相关文章推荐

新的分享

章节导航