Question

基于此tutorial我将代码从id选择器修改为类以进行多个文件上传，没有js错误，没有中断，但代码似乎现在无法正常工作

代码有什么问题吗？

由于

<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;}

Answer 1

原始教程使用document.getElementById（）返回一个DOM节点。

document.getElementsByClassName（）返回多个DOM节点的数组。切换到getElementsByClassName（）之后，您需要遍历Array并分别在每个元素上设置新的style属性。试试这个：

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);
}

用于在js中拖放图像的数组事件侦听器

1 个答案: