php - 如何在PHP中上传图片时显示进度条

Question

这是我的代码:

$(function(){

var btnUpload=$('#browse');
var adinfoid=$('#adinfoid').val();
new AjaxUpload(btnUpload, {
    action: '<?php echo base_url()?>index.php/post/upload_editmainimage/'+adinfoid,
    name: 'uploadfile',
    onSubmit: function(file, ext){

        $("#progressid").css("display","block");
        if (! (ext && /^(jpg|png|jpeg|gif|JPG|PNG|JPEG|GIF)$/.test(ext))){
            $("#mainphotoerror").html('Only JPG, PNG, GIF, files are allowed');
            $("#mainphotoerror").css('display','block');
            return false;
        }           
    },
    onComplete: function(file, response){ //alert(response);

        if(response){
                /*$(".main_image").html('');
                $(".main_image").html(response);*/
                $("#progressid").css("display","none");
                $("#image"+<?php echo $mainimage->intphotoid; ?>).css('display','block');
                $("#imagemainicon"+<?php echo $mainimage->intphotoid; ?>).css('display','block');

                $("#mainimageicon").attr("src",response);   
                $("#mainimageicon").attr("width",55);
                $("#mainimageicon").attr("height",55);
                $("#mainimageicon1").attr("src",response);  
        }else{
        alert("error");
        }
    }
}); 

});

<input type="button" id="browse" class="browse_media" value="Browse">
        <div id="progressid" class="displayNone">
            <img src="//s3.amazonaws.com/s3.racingjunk.com/102/images/procesing.gif" width="117" height="20" />
            Uploading.....
        </div>

当我单击浏览按钮时，我需要显示 5 分钟的进度条。 5 分钟后进度条将隐藏或不显示。进度条隐藏后，图像才会显示。

我该怎么做？这可能吗？

Answer 1

试试这个
http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html

我自己没试过，但今晚工作