js图片上传并显示

淩亂°似流年 2022-12-13 01:42 229阅读 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 条评论，229人围观）

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

相关阅读

相关 js图片上传并显示

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

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

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

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

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

相关 JS如何上传图片并返显

html部分 <img src='placeHolder.jpg' id='img'> <button onclick=commit()>上传</butt

比眉伴天荒/ 2022年10月31日 14:58/ 0 赞/ 191 阅读

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

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

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

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

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

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

相关图片上传并显示

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

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

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

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

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

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

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

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

相关 HTML实现自定义上传图片按钮并显示图片

在web开发中，上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮，且不能修改UI。如果要实现自定义上传按钮，一般需要设置input

水深无声/ 2021年12月01日 11:46/ 1 赞/ 1580 阅读

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

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

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