js图片上传并显示

淩亂°似流年 2022-12-13 01:42 201阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css"> img{ width: 100%; height: 100%; } </style>
    	</head>
    	<body>
    		<div class="input-file-box">
    			<span>点击上传图片</span>
    			<input type="file" name="" id="uploadfile" multiple>
    		</div>
    		<div id="img-box" style="width: 200px;height: 100px;"></div>
    	</body>
    	<script type="text/javascript"> window.onload = function() { var input = document.getElementById("uploadfile"); var div; // 当用户上传时触发事件 input.onchange = function() { readFile(this); } //处理图片并添加都dom中的函数 var readFile = function(obj) { // 获取input里面的文件组 var fileList = obj.files; //对文件组进行遍历，可以到控制台打印出fileList去看看 for (var i = 0; i < fileList.length; i++) { var reader = new FileReader(); reader.readAsDataURL(fileList[i]); // 当文件读取成功时执行的函数 reader.onload = function(e) { div = document.createElement('div'); div.innerHTML = '<img src="' + this.result + '" />'; document.getElementById("img-box").appendChild(div); } } } } </script>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS调用摄像头拍照，上传图片并显示到前端页面

本文实例为大家分享了JS实现截取视频画面的具体代码，供大家参考，具体内容如下： index.jsp 展示界面，按钮点击拍照，将拍照图片显示 <img id="s

布满荆棘的人生/ 2023年10月05日 21:46/ 0 赞/ 16 阅读

相关 base64图片上传，并显示图片，

<a href="javascript:;" class="file">选择文件 <input type="hidden" id="files-button"

刺骨的言语ヽ痛彻心扉/ 2023年08月17日 16:38/ 0 赞/ 125 阅读

相关 js图片上传并显示

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t

淩亂°似流年/ 2022年12月13日 01:42/ 0 赞/ 202 阅读

相关 php上传图片并显示代码,php完整图片上传代码

我们的目标效果：网站后台图片上传，点击上传选择图片，上传成功之后自动把图片名称放在input文本框内！！先说使用方法吧：(代码在下方自行复制，共三个demo页) 首先，最

末蓝、/ 2022年11月18日 01:25/ 0 赞/ 252 阅读

相关 js上传多张图片并显示

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" />

阳光穿透心脏的1/2处/ 2022年09月14日 08:42/ 0 赞/ 264 阅读

相关 springmvc上传图片并显示--支持多图片上传

实现上传图片功能在Springmvc中很好实现。现在我将会展现完整例子。开始需要在pom.xml加入几个jar,分别是： <dependency>

电玩女神/ 2022年08月20日 04:13/ 0 赞/ 289 阅读

相关图片上传并显示

问题描述： ![这里写图片描述][SouthEast] 选择了文件过后是这样的： ![这里写图片描述][SouthEast 1] 很显然，这样的按钮并不好看。

比眉伴天荒/ 2022年07月03日 12:30/ 0 赞/ 287 阅读

相关 springmvc上传图片，tomcat做图片服务器并显示图片

项目：maven+ssm(spring+springmvc+mybatis) 编译工具：eclipse 1.添加上传依赖包：

ゝ一世哀愁。/ 2022年05月13日 00:48/ 0 赞/ 328 阅读

相关 ajx异步上传图片并显示

利用ajax+springmvc完成上传图片并显示前言：还是由于前期没有系统的学习，又坑了自己一把。第一点：SpringMVC在接受图片，需要在springmvc中

逃离我推掉我的手/ 2022年05月08日 08:04/ 0 赞/ 233 阅读

相关 cropper.js 裁剪图片并上传

官网[http://fengyuanchen.github.io/cropper/][http_fengyuanchen.github.io_cropper] 文档[htt

小鱼儿/ 2021年08月19日 11:40/ 0 赞/ 520 阅读