我一直在尝试制作一个拖放 uploader 。我需要在“dropzone”所在的位置(虚线矩形)显示放置的图像，但我想不出办法。现在，当我放置图像时，脚本仅隐藏放置区域。我怎么能做这样的事情？
这是html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
<link rel = "icon" href="logo.png" type="image/x-icon">
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/addons/p5.sound.min.js"></script>
<script type="text/javascript" src="upload.js"></script>
<title>dooRd</title>
</head>
<body>
<nav class="topnav">
<img src="logo.png" style="width:40px;height:40px;"></img>
<a class="active" href="index.html">HOME</a>
<a href="help.html">HELP</a>
<a href="about.html">ABOUT</a>
<a href="examples.html">EXAMPLES</a>
<div class="topnav-right">
</div>
</nav>
<div class="wrapper">
<div class="dropzone" id="dropzone">
Click or Drag an image here to upload
</div>
</div>
</body>
</html>
的CSS:
@font-face {
font-family: "FFW";
src: url(FUTRFW.ttf);
}
* {
margin: 0;
padding: 0;
}
body {
background-color: #18030e;
}
tir {
display: inline-block;
text-decoration: none;
font-size: 15px;
font-family: FFW;
font-weight: bold;
color: white;
padding: 0 20px 0px;
overflow: hidden;
line-height: 1em;
}
.wrapper {
margin: 50px 10px;
height: 500px;
width: 1000px;
}
.dropzone {
padding: 25px;
border-style: dashed;
font-size: 20px;
font-family: "FFW";
color: #45747c;
height: 500px;
width: 1000px;
text-align: center;
border: 2px dashed;
line-height: 500px;
display: ;
}
.topnav {
background-color: #7b1346;
overflow: hidden;
line-height: 1em;
}
.topnav a {
font-family: "FFW";
float: left;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 1em 14px 17px 1em;
}
.topnav a:hover {
background-color: #ddd;
color: black;
padding: 1em 14px 17px 1em;
}
.topnav a.active {
background-color: #32c18b;
color: white;
padding: 1em 14 17px 1em;
}
.topnav img {
display: inline-block;
position: relative;
padding: 5px 15px 0px 15px;
float: left;
}
和脚本:
var dropzone;
function setup() {
dropzone = select('#dropzone');
dropzone.dragOver(highlight);
dropzone.dragLeave(unhighlight);
dropzone.drop(gotFile, unhighlight);
}
function gotFile(file) {
dropzone.style('display', 'none');
}
function highlight() {
dropzone.style('color', '#73C2D0');
}
function unhighlight() {
dropzone.style('color', '#45747c');
}
最佳答案
您可以初始化 gotFile像这样的功能:
function gotFile(file) {
dropzone.style('display', 'none');
if (file.type === 'image') {
var image = new Image();
image.onload = function () {
document.body.appendChild(this);
};
image.src = file.data;
}
}
var dropzone;
function setup() {
dropzone = select('#dropzone');
dropzone.dragOver(highlight);
dropzone.dragLeave(unhighlight);
dropzone.drop(gotFile, unhighlight);
}
function gotFile(file) {
dropzone.style('display', 'none');
if (file.type === 'image') {
var image = new Image();
image.onload = function () {
document.body.appendChild(this);
};
image.src = file.data;
}
}
function highlight() {
dropzone.style('color', '#73C2D0');
}
function unhighlight() {
dropzone.style('color', '#45747c');
}body {
background-color: #18030e;
}
tir {
display: inline-block;
text-decoration: none;
font-size: 15px;
font-family: FFW;
font-weight: bold;
color: white;
padding: 0 20px 0px;
overflow: hidden;
line-height: 1em;
}
.wrapper {
margin: 50px 10px;
height: 500px;
width: 1000px;
background-color: #ccc
}
.dropzone {
padding: 25px;
border-style: dashed;
font-size: 20px;
font-family: "FFW";
color: #45747c;
height: 500px;
width: 1000px;
text-align: center;
border: 2px dashed;
line-height: 500px;
display: ;
}
.topnav {
background-color: #7b1346;
overflow: hidden;
line-height: 1em;
}
.topnav a {
font-family: "FFW";
float: left;
color: #f2f2f2;
text-align: center;
text-decoration: none;
font-size: 17px;
padding: 1em 14px 17px 1em;
}
.topnav a:hover {
background-color: #ddd;
color: black;
padding: 1em 14px 17px 1em;
}
.topnav a.active {
background-color: #32c18b;
color: white;
padding: 1em 14 17px 1em;
}
.topnav img {
display: inline-block;
position: relative;
padding: 5px 15px 0px 15px;
float: left;
}<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/p5.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/p5@0.10.2/lib/addons/p5.sound.min.js"></script>
<nav class="topnav">
<img src="logo.png" style="width:40px;height:40px;"></img>
<a class="active" href="index.html">HOME</a>
<a href="help.html">HELP</a>
<a href="about.html">ABOUT</a>
<a href="examples.html">EXAMPLES</a>
<div class="topnav-right">
</div>
</nav>
<div class="wrapper">
<div class="dropzone" id="dropzone">
Click or Drag an image here to upload
</div>
</div>关于javascript - 用JS拖拽后显示图片，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59810909/