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="width:100%;height:100%; cursor: pointer;outline: medium none; position: absolute; filter:alpha(opacity=0);-moz-opacity:0;opacity:0; left:0px;top: 0px;" οnchange="showuphtml(0);"/></div>