<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传预览</title>
<script type="text/javascript">
//预览图片 obj：file表单元素 id:预览图id
function previewImg(obj,id) {
//FileReader
if(window.FileReader){//验证当前的浏览器是否支持图片预览
var reader=new FileReader();
var file=obj.files[0];
var regexImage=/^image\//;//js正则表达式，匹配是否拥有image
if(regexImage.test(file.type)){
reader.onload=function(data){
var img=document.getElementById(id);
img.src=data.target.result;
};
//开始读取上传的文件内容
reader.readAsDataURL(file);
}else{
return;
}
}else{
alert("您的浏览器不支持图片预览，请升级");
return;
}
}
</script>
</head>
<body>
<form>
<input type="file" name="f1" onchange="previewImg(this,'preview')"/>
<img alt="图片预览" id="preview" width="300px" height="auto"/>
<input type="submit" value="上传图片" accept="image/png,image/gif,image/jpg"/>
</form>
</body>
</html>
js实现图片预览
猜你喜欢
转载自blog.csdn.net/wangxiuyan0228/article/details/79893778
今日推荐
周排行