简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

文件上传并展示上传文件

黄舟
发布： 2017-02-18 13:17:29
原创
1351 人浏览过

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

   1170.png

 以上就是文件上传并展示上传文件的内容，更多相关内容请关注PHP中文网（www.php.cn）！


相关标签：
JavaScript 文件上传
来源：php.cn
上一篇：AngularJS之ng-if指令 下一篇：AngularJS之表格
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在访问路线之前预加载路线数据的最佳方法。 在为给定路由渲染页面之前，我想首先同步获取必要的数据。理想情况下，我希望在页面组件中获取数据，但我不反对在路由器文件中执行此操作。我已经阅读并尝试了各种方法，但部分挑战来自于这样一...
来自于 2023-11-17 14:54:42
0
2
379
Vue项目中未定义模块 我刚刚通过运行npmini tvue@latest创建了一个新的Vue应用程序，如官方文档中指定的那样。然后我尝试按照Vue和Vite网站上的指南将Tailwind添加到我的应用程...
来自于 2023-11-17 12:38:53
0
2
394
Nuxt.js SSG（静态站点生成器）获取API数据 当使用静态站点生成器构建项目时，我理解提前创建的文档是提供给用户的。如果进入页面时有使用axios等获取数据并显示在屏幕上的逻辑，对应的API是被缓存还是不被调用？
来自于 2023-11-16 21:36:07
0
1
176
如何在 XML 文件中添加换行符（换行符）？ 我有一个XML文件，我想在文本中换行“示例文本123”像这样SampleText123我已经尝试了我所说的一切&#xA&#xD\n但没有任何效果：<?xmlv...
来自于 2023-11-16 16:42:38
0
1
199
捕获Guzzle的异常 我正在尝试捕获在我正在开发的API上运行的一组测试中的异常，并且我正在使用Guzzle来使用API方法。我已经将测试包装在try/catch块中，但它仍然抛出未处理的异常错误。按照...
来自于 2023-11-16 14:36:03
0
12
290
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！