世卫汽车网
您的当前位置:首页文件上传并展示上传文件

文件上传并展示上传文件

来源:世卫汽车网
 1、问题背景

利用文件上传组件file,上传文件后并显示文件(图片)

2、实现源码

<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>文件上传并展示文件路径</title>
	<script type="text/javascript" src="../js/jquery-1.12.3.js" ></script>
	<script>
	$(document).ready(function(){
	$("#fileUpload").off().on("change",function(){
	var fileUpload = $(this).val();
	var proUrl = window.location.protocol;
	var pageUrl = window.location.host;
	var path = proUrl + "//" +pageUrl + "/AngularJS/pages/";
	$("#uploadImg").attr("src",path+fileUpload);
	console.info(path+fileUpload);
	});
	});
	</script>
	</head>
	<body>
	<p>
	<input type="file" id="fileUpload" name="upload" /><br><br>
	<img id="uploadImg" style="width: 200px; height: 200px;">
	</p>
	</body>
</html>


3、实现结果

显示全文