文件上传并展示上传文件

来源：动视网责编：小采时间：2020-11-27 20:25:02

文件上传并展示上传文件

文件上传并展示上传文件:1、问题背景利用文件上传组件file，上传文件后并显示文件（图片）2、实现源码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传并展示文件路径</title&g

推荐度：

点击下载本文 文档为doc格式

导读文件上传并展示上传文件:1、问题背景利用文件上传组件file，上传文件后并显示文件（图片）2、实现源码<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文件上传并展示文件路径</title&g

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、实现结果

文件上传并展示上传文件

推荐度：

点击下载本文 文档为doc格式

标签：文件上传文件夹

热门焦点

文件上传并展示上传文件

文件上传并展示上传文件

文件上传并展示上传文件

最新推荐

猜你喜欢

热门推荐