前端页面选择文件后回显

最新推荐文章于 2024-02-22 17:59:27 发布

想踢球考研的java

最新推荐文章于 2024-02-22 17:59:27 发布

阅读量333

点赞数

分类专栏：编程干货文章标签： javascript css jquery html5 正则表达式

原文链接：https://blog.csdn.net/wd4871/article/details/51445043

版权

编程干货专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<script type="text/javascript">
     function changImg(e){
		for (var i = 0; i < e.target.files.length; i++) {
			var file = e.target.files.item(i);
			if (!(/^image\/.*$/i.test(file.type))) {
				continue; //不是图片 就跳出这一次循环
			}
			//实例化FileReader API
			var freader = new FileReader();
			freader.readAsDataURL(file);
			freader.onload = function(e) {
				$("#myImg").attr("src",e.target.result);
			}
		}
	}
</script>
 
使用方式:
<form action="">
   <input type="file" name="files" accept="image/*" οnchange="changImg(event)" >
   <img alt="再无图片" id="myImg" src="" height="100px",width="100px">
</form>