html5中IE、火狐、谷歌图片上传预览

来源：互联网发布：中山大学学生网络缴费编辑：程序博客网时间：2024/06/10 05:01

<!doctype html>

<html>

<head>

function fileSelect(){

var e=arguments.callee.caller.arguments[0]||window.event;

var files=e.target.files;//要上传的文件列表对象

var reg = /image\/.*/i; //文件格式验证

var p=document.getElementById('Preview');

var ul=document.getElementById('Errors');

var myp=document.getElementById('myprogress');

for(var i=0,f;f=files[i];i++){

if(!f.type.match(reg)) {

//设置错误信息

var li=document.createElement('li');

li.innerHTML='<li>'+f.name +'不是图片文件.</li>';

ul.appendChild(li);

continue;

}else{

var reader = new FileReader();

//文件成功读取完成时触发

reader.onload=(function(file){

return function(e){

var span =document.createElement('span');

span.innerHTML='<img src="'+this.result+'" alt="'+file.name+'" title="'+file.name+'" class="mypic"/>';

p.insertBefore(span,null);

};

})(f);

reader.onprogress=function(e){

//更新进度条

myprogress.value=(e.loaded/e.total)*100;

}

onerror 出错时触发

onload 文件读取成功完成时触发

onloadend 读取完成触发，无论成功或失败

onloadstart 读取开始时触发

onprogress 读取中

//读取文件内容

reader.readAsDataURL(f);

}

$(function(){

if(window.File && window.FileList && window.FileReader && window.Blob){

$("#Files").change(function(){

fileSelect();

});

//document.getElementById('Files').addEventListener('click',fileSelect,false);

}else{

document.write('您的浏览器不支持File Api');

}

});

</script>

<style>

.mypic{

width:100px;

height:120px;

margin-left:10px;

border:1px solid #F60;

}

progress{

width:800px;

height:30px;

}

</style>

</head>

<body>

</ul>

</div>

</body>

</html>

0 0