这是我的代码:
$(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分钟后,进度条将隐藏或不显示。进度条隐藏后,将显示图像。
我该怎么做?这可能吗?
答案 0 :(得分:2)
试试这个 http://www.9lessons.info/2012/04/file-upload-progress-bar-with-jquery.html
我自己没有尝试过但是晚上工作
答案 1 :(得分:1)
你必须这样做: -
<div id="popup1" class="popup_block">
<?php echo $this->Html->image('ajax-loader2.gif'); ?>
<h4>Processing Please Wait...! </h4>
</div>
在剧本中: - 使用Jquery
//Fade in Background
jQuery('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
jQuery('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
var popID = 'popup1';
//var popWidth = 500;
//Fade in the Popup and add close button
jQuery('#' + popID).css({ 'width': '250' });
你可以在你的Jquery中给出的时间或者这样: -
window.setInterval(function() {
// this will execute every 5 minutes => show the alert here
}, 300000);
答案 2 :(得分:0)
使用您共享的代码无法实现这一目标。您会看到,您需要知道已向服务器发送了多少数据,以便您可以显示实际进度。
人们如何做到这一点? 他们使用java Applet或Flash等第三方插件上传文件 2.他们使用动画图片显示文件发送过程中的进度(而非实际进度)。 3.他们使用HTML 5.
有关已将多少文件发送到服务器的实时反馈,您将需要第三方插件(如果您使用的是较旧的浏览器)或HTML5 XMLHttpRequest对象
请参阅上传状态/进度条的html5 file upload。