多个拖放图片javascript

Question

如何让这段代码多次拖放？

我知道在jquery中它使用＆＃39;每个函数＆＃39;但我不知道如何在js中这样做。我需要选择器成为一个类，因此它可以使用多个对象，而不仅仅是1个id。我从这个网站获得了教程，并且已经改变了

document.getElementById("example");
到
document.getElementsByClassName("example");

但是，由于这个＆gt;

，我还没有成功

  

未捕获的TypeError：droparea.addEventListener不是函数

有什么建议吗？

DRAG AND DROP IMAGE

FIDDLE HERE >>

<div class="container">
    <div class="row">
        <div class="col-xs-2 left">
            <div class="filedroparea">(Drag & drop file here)</div>
            <img class="previewimage" alt="Preview Image" />
        </div>
        <!-- .left -->
        <div class="col-xs-8 center">
            <div class="box-wrap">
                <div class="box-ads-1">
                    <div class="filedroparea">(Drag & drop file here)</div>
                    <img class="previewimage" alt="Preview Image" />
                </div>
                <div class="box-ads-2">
                    <div class="filedroparea">(Drag & drop file here)</div>
                    <img class="previewimage" alt="Preview Image" />
                </div>
            </div>
        </div>
        <!-- .center -->
        <div class="col-xs-2 right">
            <div class="filedroparea">(Drag & drop file here)</div>
            <img class="previewimage" alt="Preview Image" />
        </div>
        <!-- .right -->
    </div>
    <!-- .row -->
</div>
<!-- .container -->
    if (window.FileReader) {
    // Current browser supports drag and drop
    var droparea = document.getElementsByClassName("filedroparea");
    droparea.addEventListener("dragenter", dragenter, false);
    droparea.addEventListener("dragover", dragover, false);
    droparea.addEventListener("drop", drop, false);

    var showButton = document.getElementsByClassName("showdroparea");
    showButton.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;

    // Reading first file
    var image = images[0];
    var reader = new FileReader();
    reader.readAsDataURL(image);

    reader.addEventListener("loadend", showPreview, false);
}

function showPreview(e, file) {
    var imageElement = document.getElementsByClassName('previewimage');
    imageElement.src = this.result;

    document.getElementsByClassName("filedroparea").style.display = 'none';
    imageElement.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';
}

.filedroparea {
    width: 100%;
    height: 100%;
    text-align: center;
    background: #ccc;
}
.previewimage {
    display:none;
}
.showdroparea {
    display:none;
    cursor: pointer;
}