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>
<div>
<input type="file" id="fileUpload" name="upload" /><br><br>
<img id="uploadImg" style=" 200px; height: 200px;">
</div>
</body>
</html>
3、实现结果