Home > Article > Web Front-end > File upload and display of uploaded files

File upload and display of uploaded files

黄舟Original: 2017-02-18 13:17:291385browse

1. Problem background

Use the file upload component file to upload the file and display the file (picture)

2. Implementation source code

<!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="max-width:90%" alt="File upload and display of uploaded files" >
		</p>
	</body>
</html>

3. Implementation result

File upload and display of uploaded files

The above is the file upload and display of the content of the uploaded file. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：AngularJS ng-if directiveNext article：AngularJS ng-if directive

See more

File upload and display of uploaded files

Related articles