javascript图片上传

最新推荐文章于 2021-12-23 14:14:03 发布

人终将被少年不得之物困扰一生

最新推荐文章于 2021-12-23 14:14:03 发布

阅读量112

点赞数

本文链接：https://blog.csdn.net/weixin_43889484/article/details/103646339

版权

可以把图片点击上传，也可以拖拽上传

代码：

<!DOCTYPE html>
<html>
<head>
	<title>上传头像</title>
	<meta charset="utf-8">
	<style type="text/css">
		*{margin: 0;
			padding: 0;}
			.container{
				width: 50%;
				margin: 0 auto;
				height: 400px;
				padding: 20px;
				text-align: center;
			}
			.main{
				width: 200px;
				height: 200px;
				border: 2px dashed #666;
				margin: 20px auto;
				position: relative;
			}
			.main input{
				width: 100%;
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);
				z-index: 11;
			}
			.main .btn{
				width: 150px;
				height: 150px;
				cursor: pointer;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%,-50%);

			}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var file=document.querySelector("#file");
			var addImg =document.querySelector(".btn");
			var main =document.querySelector(".main");
			function upload(img){
				var imgFile=new FileReader();
				imgFile.readAsDataURL(img);
				imgFile.onload =function(e){
					addImg.src=e.target.result;
				}
			}
			file.onchange=function(e){
				var img =e.target.files[0];
				upload(img);
			}
			main.ondragover=function(){
				return false;
			}
			main.ondrop =function(e){
				upload(e.dataTransfer.files[0]);
				return false;
			}
		}

	</script>
</head>
<body>
<div class="container">
	<h1>拖动外部图片或单击上传图片</h1>
	<div class="main">
		<input type="file" name="file" id="file"/>
		<img src="shirt_1.jpg" class="btn">
	</div>
</div>

</body>
</html>

在这里插入图片描述

人终将被少年不得之物困扰一生

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript图片上传

可以把图片点击上传，也可以拖拽上传代码：<!DOCTYPE html><html><head> <title>上传头像</title> <meta charset="utf-8"> <style type="text/css"> *{margin: 0; padding: 0;} .c...
复制链接

扫一扫