在phonegap android中上传多个文件时使用jquery ui显示进度条

时间:2013-12-09 09:53:29

标签: javascript android jquery file-upload cordova

我在我的Android应用程序中将一些图像上传到服务器。我想要的是在上传时我想显示进度条而不是加载图像,以便用户可以理解上传的图像数量。我只使用jquery和jquery-ui 1.10.2创建这个应用程序。我在jQuery ui网站上显示自定义进度条显示的例子,但我无法正确使用它的问题是在上传时显示进度条只有50%但所有图像都上传到这里我使用的代码进度条和上传图片:

    var file_uri = ['file:///mnt/sdcard/TEST_demo/TEST_710_1113.jpg',
                'file:///mnt/sdcard/TEST_demo/TEST_710_1114.jpg',
                'file:///mnt/sdcard/TEST_demo/TEST_710_1115.jpg',
                'file:///mnt/sdcard/TEST_demo/TEST_710_1116.jpg'];
function upload_image()
{
for(var i =0;i<file_uri.length;i++)
{
    var imageURI = file_uri[i];
    server = urlserver+'upload.php';
    if (server) {

        var option = new FileUploadOptions();
            option.fileKey="file";
            option.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
            option.mimeType="image/jpeg/doc/docx/pdf/txt";
            option.chunkedMode = false;

            var ft = new FileTransfer();

        ft.onprogress = function(progressEvent) {
            if (progressEvent.lengthComputable) {
                var loaded = device.platform == "Android" ? (progressEvent.loaded / 2) : progressEvent.loaded;
                var perc =    Math.round( (loaded / progressEvent.total) * 100 );
                var progressbar = $("#progressbar"), progressLabel = $(".progress-label");
                progressbar.progressbar({
                    value : false,
                    change : function() {
                        console.log('in change function:');
                        progressLabel.text(progressbar.progressbar("value") + "%");
                    },
                    complete : function() {
                        progressLabel.text("Complete!");
                    }
                });
                function progress() {
                    console.log('in progress function');
//                      var val = progressbar.progressbar("value") || 0;
                    progressbar.progressbar("value", perc);
                    if (perc < 99) {
                        setTimeout(progress, 100);
                    }
                }
                setTimeout(progress, 1000);
            }
        }
        ft.upload(imageURI, server, function(r) {   
            document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";              
        }, function(error) {
            document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
        }, option);
    }
}    }

1 个答案:

答案 0 :(得分:1)

删除/2,这就是您的进度以50%结束的原因:

var loaded = device.platform == "Android" ? (progressEvent.loaded / 2) : progressEvent.loaded;    

新代码:

var loaded = progressEvent.loaded;