Community Learn Tools Library Leisure
search
English
Home > Web Front-end > JS Tutorial > body text

File upload and display of uploaded files

黄舟
Release： 2017-02-18 13:17:29
Original
1399 people have browsed it

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>
Copy after login


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)!


Related labels：
JavaScript File Upload
source：php.cn
Previous article：AngularJS ng-if directive Next article：AngularJS table
Statement of this Website
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
Latest Articles by Author
Latest Issues
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
How to use laravel components with livewire lazy placeholder I want to add the skeleton of my laravel component inside a livewire3 placeholder What I h...
From 2024-04-06 20:02:10
0
2
543
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
Scatterplot points do not maintain values ​​when zooming in d3.js This is my first time using d3.js, so please bear with me. I implemented it as pure JavaSc...
From 2024-04-06 18:16:26
0
1
403
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template