您的位置：首页 > Web前端 > HTML5

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

2015-04-01 09:35 344 查看

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>点击上传</title>

<script src="jquery-1.9.1.js"></script>

<script>

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>

<input type="file" multiple id="Files" accept="image/jpeg"/>

<ul id="Errors">

</ul>

<div id="Preview">

</div>

<progress max="100" id="myprogress" value="0"></progress>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航