HTML5上传图片到远程服务器,使用html5 FileReader获取图片，并异步上传到服务器(不使用iframe)...

HTML PUBLIC>

使用html5 FileReader获取图片，并异步上传到服务器(not iframe)

body{margin: 0px; background:#f2f2f0;}

p{margin:0px;}

.title{color:#FFFF00; background:#000000; text-align:center; font-size:24px; line-height:50px; font-weight:bold;}

.file{position:absolute; width:100%; font-size:90px;}

.filebtn{display:block; position:relative; height:110px; color:#FFFFFF; background:#06980e; font-size:48px; line-height:110px; text-align:center; cursor:pointer; border: 3px solid #cccccc;}

.filebtn:hover{background:#04bc0d;}

.showimg{margin:10px auto 10px auto; text-align:center;}

window.onload = function(){

// 选择图片

document.getElementById('img').onchange =function(){

varimg = event.target.files[0];

// 判断是否图片

if(!img){

return;

}

// 判断图片格式

if(!(img.type.indexOf('image')==0 && img.type && /\.(?:jpg|png|gif)$/.test(img.name)) ){

alert('图片只能是jpg,gif,png');

return;

}

varreader =newFileReader();

reader.readAsDataURL(img);

reader.onload = function(e){// reader onload start

// ajax 上传图片

$.post("server.php", { img: e.target.result},function(ret){

if(ret.img!=''){

alert('upload success');

$('#showimg').html('');

}else{

alert('upload fail');

}

},'json');

} // reader onload end

}

}

使用html5 FileReader获取图片，并异步上传到服务器(not iframe)

请选择图片