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、实现结果
以上就是文件上传并展示上传文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
