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


<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标签显示出来_第1张图片js实现在html页面使用file选择框选中图片后使用img标签显示出来_第2张图片
js实现在html页面使用file选择框选中图片后使用img标签显示出来_第3张图片

你可能感兴趣的:(js实现在html页面使用file选择框选中图片后使用img标签显示出来)