Javascript js中拖放图像的数组事件侦听器
基于此,我将代码从id选择器修改为类,用于多个文件上载,没有js错误,没有中断,但代码现在似乎不起作用 代码有什么问题吗 谢谢Javascript js中拖放图像的数组事件侦听器,javascript,html,Javascript,Html,基于此,我将代码从id选择器修改为类,用于多个文件上载,没有js错误,没有中断,但代码现在似乎不起作用 代码有什么问题吗 谢谢 <div class="filedroparea">DROP IMAGE HERE</div> <img class="previewimage" alt="Preview Image"/> <div class="showdroparea">Drop New Image</div> <div clas
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
<div class="filedroparea">DROP IMAGE HERE</div>
<img class="previewimage" alt="Preview Image"/>
<div class="showdroparea">Drop New Image</div>
if (window.FileReader) {
// Current browser supports drag and drop
var droparea = document.getElementsByClassName("filedroparea");
for(var i=0; i< droparea.length; i++){
droparea[i].addEventListener("dragenter", dragenter, false);
droparea[i].addEventListener("dragover", dragover, false);
droparea[i].addEventListener("drop", drop, false);
}
var showButton = document.getElementsByClassName("showdroparea");
for(var i=0; i< showButton.length; i++){
showButton[i].addEventListener("click", showarea, false);
}
}
else {
document.getElementsByClassName('filedroparea').innerHTML = 'Your browser does not support FileReader HTML5 API';
}
// Event callback functions
function dragenter(e) {
e.stopPropagation();
e.preventDefault();
}
function dragover(e) {
e.stopPropagation();
e.preventDefault();
}
function drop(e) {
e.stopPropagation();
e.preventDefault();
// Get list of dropped files
var dt = e.dataTransfer;
var images = dt.files;
//console.log(images);
// Reading first file
var image = images[0];
var reader = new FileReader();
for(var i=0; i< reader.length; i++){
reader[i].readAsDataURL(image);
reader[i].addEventListener("loadend", showPreview, false);
}
}
function showPreview(e, file){
var imageElement = document.getElementsByClassName('previewimage');
for(var i=0; i< imageElement.length; i++){
imageElement[i].src = this.result;
document.getElementsByClassName("filedroparea").style.display = 'none';
imageElement[i].style.display = 'block';
document.getElementsByClassName("showdroparea").style.display = 'block';
}
}
function showarea(e){
document.getElementsByClassName("filedroparea").style.display = 'block';
document.getElementsByClassName('previewimage').style.display = 'none';
document.getElementsByClassName("showdroparea").style.display = 'none';
}
html,body{margin:0, padding:0; text-align:center; background: #eee url('../images/bg.png'); font-family: arial,sans-serif; font-size: 14px;}
a{font-size: 12px; color: #666;}
.filedroparea{margin: 50px auto; width: 600px; height: 300px; border: 5px dashed #FF0066; text-align:center; line-height: 300px;text-shadow: 1px 1px 1px #ccc;}
.previewimage{display:none; margin:50px auto; max-width:600px; box-shadow: 0 2px 2px #aaa;}
.showdroparea{display:none; text-align: center; cursor: pointer; padding: 8px 0px; color: #fff; background: #5A8AFA; width: 150px; margin: auto; text-transform: uppercase; border-bottom: 2px solid #4A77E0;}
将图像放到这里
原始教程使用document.getElementById()返回DOM节点
getElementsByClassName()返回多个DOM节点的数组。切换到GetElementsByCassName()后,需要循环遍历数组,并分别在每个元素上设置新的样式属性。试试这个:
function hideAll(elements) {
var length = elements.length;
var i;
for (i=0; i<length; i++) {
elements[i].style.display = 'none';
}
}
function showAll(elements) {
var length = elements.length;
var i;
for (i=0; i<length; i++) {
elements[i].style.display = 'block';
}
}
function showarea(e){
var filedropareas = document.getElementsByClassName("filedroparea");
var previewimages = document.getElementsByClassName('previewimage');
var showdropareas = document.getElementsByClassName("showdroparea");
showAll(filedropareas);
hideAll(previewimages);
hideAll(showdropareas);
}
函数隐藏(元素){
变量长度=elements.length;
var i;
对于(i=0;i