h5图片点击上传与后台无关的预览

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片上传预览</title>
<script type="text/javascript">
function imgPreview(fileDom){
//判断是否支持FileReader
if (window.FileReader) {
var reader = new FileReader();
} else {
alert("您的设备不支持图片预览功能,如需该功能请升级您的设备!");
}

//获取文件
var file = fileDom.files[0];
var imageType = /^image\//;
//是否是图片
if (!imageType.test(file.type)) {
alert("请选择图片!");
return;
}
//读取完成
reader.onload = function(e) {
//获取图片dom
var img = document.getElementById("preview");
//图片路径设置为读取的图片
img.src = e.target.result;
};
reader.readAsDataURL(file);
}
</script>
</head>
<body>
<img id="preview" />
<br />
<input type="file" name="file" onchange="imgPreview(this)" />
</body>
</html>

posted on 2017-06-13 10:24  萧皓灏博客园  阅读(545)  评论(0编辑  收藏  举报

导航