假性进度效果

var image1=new Image();

var loadi=0

var loadtime=null;

function pageload(){
loadi++;
if(loadi==1){
var canvas = document.getElementById("adCanvas");

image1=image;

if(image1.width > 200) {
// 宽度等比例缩放 *=
image1.height =image1.height*200 / image1.width;
image1.width = 200;
}

$("#fgbox").css("width",image1.width);
$("#fgbox").css("height",image1.height);

var ctx = canvas.getContext("2d");
// canvas清屏
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 重置canvas宽高
canvas.width = image1.width;
canvas.height = image1.height;
// 将图像绘制到canvas上
ctx.drawImage(image1, 0, 0, image1.width, image1.height);

$("#adcbox").css("display","block");
loadtime=setTimeout('pageload()',100);
}
if(loadi<20){
var h = image1.height*(100-loadi)/100;
$("#fgbox").css("height",h);
loadtime=setTimeout('pageload()',600);
$("#loadnum").html(loadi+'%');
}else if(loadi<50){
var h = image1.height*(100-loadi)/100;
$("#fgbox").css("height",h);
loadtime=setTimeout('pageload()',400);
$("#loadnum").html(loadi+'%');
}else if(loadi<90){
var h = image1.height*(100-loadi)/100;
loadtime=$("#fgbox").css("height",h);
setTimeout('pageload()',500);
$("#loadnum").html(loadi+'%');
}else if(loadi<100){
var h = image1.height*(100-loadi)/100;
loadtime=$("#fgbox").css("height",h);
setTimeout('pageload()',900);
$("#loadnum").html(loadi+'%');
}
}

html部分：

<div id="up_pic" class="k xn c13 fl ra2 ma1" style="position:relative;color:red;text-align:center;background-color: deepskyblue;"> 上传图片<input type="file" id="file" style="100%;height:100%; cursor: pointer;outline: medium none; position: absolute; filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:0px;top: 0px;" onchange="showuphtml(0);"/></div>