ajax上传进度条不能在iphone上运行

时间:2014-09-25 19:21:43

标签: jquery ios iphone ajax ipad

我使用以下代码在我的上传表单中添加进度条。它似乎在chrome和ipad上没有问题,但是在iphone上它似乎没有移动超过1%并且上传永远不会完成。有没有iphone特定的问题,即使它似乎在ipad上工作正常?

<script type="text/javascript">
$(document).ready(function() { 

var progressbox     = $('#progressbox');
var progressbar     = $('#progressbar');
var statustxt       = $('#statustxt');
var completed       = '0%';

var options = { 
        target:   '#output',   // target element(s) to be updated with server response 
        beforeSubmit:  beforeSubmit,  // pre-submit callback 
        uploadProgress: OnProgress,
        success:       afterSuccess,  // post-submit callback 
        resetForm: true        // reset the form after successful submit 
    }; 

 $('#MyUploadForm').submit(function() { 
        $(this).ajaxSubmit(options);            
        // return false to prevent standard browser submit and page navigation 
        return false; 
    });

//when upload progresses    
function OnProgress(event, position, total, percentComplete)
{
//Progress bar
progressbar.width(percentComplete + '%') //update progressbar percent complete
statustxt.html(percentComplete + '%'); //update status text
if(percentComplete>50)
    {
        statustxt.css('color','#fff'); //change status text to white after 50%
    }
}

//after succesful upload
function afterSuccess()
{
$('#submit-btn').show(); //hide submit button
$('#loading-img').hide(); //hide submit button
$('#upload_form_holder').hide(); //hide submit button


}

//function to check file size before uploading.
function beforeSubmit(){
//check whether browser fully supports all File API
if (window.File && window.FileReader && window.FileList && window.Blob)
{

    if( !$('#imageInput').val()) //check empty input filed
    {
        $("#output").html("Are you kidding me?");
        return false
    }

    var fsize = $('#imageInput')[0].files[0].size; //get file size
    var ftype = $('#imageInput')[0].files[0].type; // get file type

    //allow only valid image file types 
    switch(ftype)
    {
        case 'image/png': case 'image/gif': case 'image/jpeg': case 'image/pjpeg':
            break;
        default:
            $("#output").html("<b>"+ftype+"</b> Unsupported file type!");
            return false
    }

    //Allowed file size is less than 5 MB (5242880)
    if(fsize>5242880) 
    {
        $("#output").html("<b>"+bytesToSize(fsize) +"</b> Too big Image file! <br      />Please reduce the size of your photo using an image editor.");
        return false
    }

    //Progress bar
    progressbox.show(); //show progressbar
    progressbar.width(completed); //initial value 0% of progressbar
    statustxt.html(completed); //set status text
    statustxt.css('color','#000'); //initial color of status text


    $('#submit-btn').hide(); //hide submit button
    $('#loading-img').show(); //hide submit button
    $("#output").html("");  
}
else
{
    //Output error to older unsupported browsers that doesn't support HTML5 File API
    $("#output").html("Please upgrade your browser, because your current browser lacks  some new features we need!");
    return false;
}
}

//function to format bites bit.ly/19yoIPO
function bytesToSize(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}

}); 
</script>

0 个答案:

没有答案