多图片上传，不上传后台，直接回显

最新推荐文章于 2020-11-29 12:47:44 发布

qq_26949717

最新推荐文章于 2020-11-29 12:47:44 发布

阅读量1.4k

点赞数 1

分类专栏： java script 文章标签： javascript 图片上传图片回显

本文链接：https://blog.csdn.net/qq_26949717/article/details/77929348

版权

java script 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

做项目时，要用到图片上传，可是框架内没有封装任何文件上传控件，只能用 input file ,可是却不能回显，只能去网上查找，结果都是一些jquery插件。插件都很大，而且样式都封装了，和项目框架不搭，就想知道js有没有可以直接会显得方法，结果还真找到了。仅仅一个HTML就可以支持图片上传回显，而且样式可以自己修改，只是比较简洁，不过够用了。

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>文件不上传预览</title>
	</head>
	<body>
		<input id="load" type="file" οnchange="upload(this.files)" multiple/>
		<div id="huixian"></div>
		<script type="text/javascript">
			function getobj(obj) {
			    return document.getElementById(obj);
			}
			function upload(f){
			     
			    var str = "";
			    for(var i=0;i<f.length;i++){
			        var reader = new FileReader();
			        reader.readAsDataURL(f[i]);
			        reader.onload = function(e){
			            str+='<img src="'+e.target.result+'"/>';
			            getobj("huixian").innerHTML = str;
			        }
			    }
			 
			}
		</script>
	</body>
</html>