js实现在html页面使用file选择框选中图片后使用img标签显示出来

js实现在html页面使用file选择框选中图片后使用img标签显示出来


1、body:

  <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>

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全部代码:

<!DOCTYPE html>
<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、效果图


                                            js实现在html页面使用file选择框选中图片后使用img标签显示出来