<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片预览</title>
</head>
<body>
<!--
文件上传在现代浏览器是基于FileReader API
基于浏览器的安全策略，file标签在现在浏览器中已获取不到真实路径。而低版本ie可以获取到真实路径
FileReader有四种读取文件的方式
1.readAsBinaryString读取为二进制码
2.readAsDataURL 读取为DataURL
3.readAsText读取为文本
4.readAsArrayBuffer 读取为队列缓存
图片上传后的需求，需要将图片读取为DataURL,DataURL的固定格式，
例如：data:[文件格式];base64,[文本流base64编码]
1.jpg格式: data:image/jpeg;base64,/9j/4...
2.png:data:image/png;base64,iVBORw...
3.gif:data:image/gif;base64,R0IGOD...
-->
<input id="files" type="file" onchange="previewImage(this,'prvid')",multiple="multiple"/>
<div id="prvid">预览容器</div>
</body>
<script type="text/javascript">
function previewImage(file,prvid){
/*
file:file控件
prvid:图片预览容器
*/
var tip = "Expect jpg or png or gif!";
var filters = {
"jpeg":"/9j/4",
"gif":"R0IGOD",
"png":"iVBORw"
};
var prvbox = document.getElementById(prvid);
prvbox.innerHTML = "";
//浏览器支持FileReader
if(window.FileReader){
for(var i=0,f;f=file.files[i];i++){
var fr = new FileReader();
fr.onload = function(e){
var src = e.target.result;
//验证没通过
if(!validateImg(src)){
alert(tip);
}else{
//验证通过
showPrvImg(src);
}
};
fr.readAsDataURL(f);
}
//浏览器不支持FileReader
}else{
if(!/.jpg$|.png$|.gif$/i.test(file.value)){
alert(tip);
}else{
showPrvImg(file.value);
}
}
//验证图片
function validateImg(data){
var pos = data.indexOf(",")+1;
for(var e in filters){
if(data.indexOf(filters[e])===pos){
return e;
}
}
return null;
}
//展示图片
function showPrvImg(src){
var img = document.createElement("img");
img.src = src;
prvbox.appendChild(img);
}
}
</script>
</html>