js实现在html页面使用file选择框选中图片后使用img标签显示出来
1、body:
2、script:
<script>
var regexImageFiler;
var imgReaderl = new FileReader();
regexImageFiler = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg|\/gif)$/i;
imgReaderl.onload = function(evt) {
$("#MYimg").attr("src", evt.target.result);
}
$("#MYFile").change(function() {
var imgfFile = $("#MYFile").prop("files")[0];
if(!regexImageFiler.test(imgfFile.type)) {
alert("选择有效图片");
}
imgReaderl.readAsDataURL(imgfFile);
})
</script>
3、jquery全部代码:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.7.1.js"></script>
</head>
<body>
<div>
<img id="MYimg" src="" />
</div>
<div style="margin-top: 20px;">
<a href="javascript:void(0)" class="file">
<input type="file" name="" id="MYFile" />
</a>
</div>
</body>
<script>
var regexImageFiler;
var imgReaderl = new FileReader();
regexImageFiler = /^(?:image\/bmp|image\/png|image\/jpeg|image\/jpg|\/gif)$/i;
imgReaderl.onload = function(evt) {
$("#MYimg").attr("src", evt.target.result);
}
$("#MYFile").change(function() {
var imgfFile = $("#MYFile").prop("files")[0];
if(!regexImageFiler.test(imgfFile.type)) {
alert("选择有效图片");
}
imgReaderl.readAsDataURL(imgfFile);
})
</script>
</html>
4、效果图
发表评论