这就是我想要发生的事情:
我设法让 2 和 3 工作起来。请在此处查看 codepen 上的代码: http://codepen.io/aseelaldallal/pen/QdwYgv/
这是我的问题:
假设用户将图像放入灰色框中(或单击上传图像)。图像出现。现在,假设他/她试图将另一张图像放在第一张图像之上。应该发生的情况是第一个图像被删除,然后新图像出现。不幸的是,这不起作用。
假设用户将图像放入灰色框中(或单击上传图像)。图像出现。现在假设用户单击上传图像并选择另一张图像。什么都没发生。原始图像仍然存在。
这是我的代码(或者只需单击上面的 codepen 链接):
HTML:
<div id="imageBorder" class="container">
<div id="imageContainer">
<div id="dropbox">
<i class="fa fa-picture-o" aria-hidden="true"></i>
<p> Drop image here or click to upload</p>
</div>
<div id="preview" class="hidden">
</div>
<button id="fileSelect" class="btn btn-primary btn-block">Upload Image</button>
</div>
</div>
JS
$(document).ready(function() {
var dropbox = document.getElementById("dropbox"),
fileElem = document.getElementById("fileElem"),
fileSelect = document.getElementById("fileSelect");
fileSelect.addEventListener("click", function(e) {
if (fileElem) {
fileElem.click();
}
}, false);
dropbox.addEventListener("dragenter", dragenter, false);
dropbox.addEventListener("dragover", dragover, false);
dropbox.addEventListener("drop", drop, false);
});
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
var dt = e.dataTransfer;
var files = dt.files;
handleFiles(files);
}
function handleFiles(files) {
var file = files[0];
var imageType = /^image\//;
if (!imageType.test(file.type)) {
alert("NOT AN IMAGE");
return;
}
var img = document.createElement("img");
img.classList.add("obj");
img.file = file;
img.height = $('#dropbox').height();
img.width = $('#dropbox').width();
$(dropbox).addClass('hidden');
$(preview).removeClass('hidden');
preview.appendChild(img);
var reader = new FileReader();
reader.onload = (function(aImg) {
return function(e) {
aImg.src = e.target.result;
};
})(img);
reader.readAsDataURL(file)
}
CSS
#imageBorder {
padding: 1rem;
border-radius: 5px;
box-sizing: border-box;
height: 300px;
width: 550px;
border: 1px solid #ccc;
}
#imageContainer {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
#dropbox {
border-radius: 5px;
text-align: center;
color: gray;
text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.3);
background-color: #e7e7e7;
height: 100%;
margin-bottom: 2%;
display: flex;
flex-direction: column;
justify-content: center;
}
#dropbox i {
font-size: 6.5rem;
margin-bottom: 1rem;
}
#dropbox p {
font-size: 2rem;
margin-top: 1rem;
}
#preview {
text-align: center;
height: 100%;
margin-bottom: 2%;
}
我尝试了像添加这样简单的事情
$(preview).empty() before preview.appendChild(img)... Didn't work .
有什么想法吗?
您隐藏了带有事件侦听器的保管箱,因此这就是它无法工作的原因。
好吧,我设法通过添加使按钮正常工作:
img.height = Math.max($('#dropbox').height(),$('#preview').height()) ;
img.width = Math.max($('#dropbox').width(),$('#preview').width()) ;
$(dropbox).addClass('hidden');
$(preview).removeClass('hidden');
$(preview).empty();
我仍然无法按照问题中指定的方式进行拖放操作
[在此处输入图像描述][1]
标志:黑色背景,幻灯片渐变蓝白移动文字“MOVING SWEDEN” TO 的彩虹字,然后切为黑色