HTML5拖放：在单独的div中显示droppable元素（Java Script和Knockout JS）

Question

我是Knockout和java脚本的初学者。我的项目有问题。我使用Knockout javascript使用HTML5拖放API。现在我需要在单独的div中显示所有drop项目。我有一些代码显示droppable项目的名称。但我想显示文件而不是文件名。以下是我的示例演示。

我可以使用淘汰赛或纯java脚本。

VIEW FIDDLE HERE

function ViewModel(){
    var self = this;
    this.dropZones = ko.observableArray([{
        'elements' : ko.observableArray([])  // just to see that the output is correct
    }]);

    this.dragover = function(e){
        console.log('dragOver');
        e.stopPropagation();
        e.preventDefault();
    }

    this.drop = function(e, data){
        console.log('drop');
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files;
        for (var i = 0, f; f = files[i]; i++) {
            data.elements.push(f.name);
        }
        $('.drop_zone').css('background-color', '#ffffff');
    }

    this.dragenter = function(e, index){
        console.log('dragEnter');
        $('.drop_zone').eq(index).css('background-color', '#00ff00');
    }

    this.dragleave = function(e, index){
        console.log('end');
        $('.drop_zone').eq(index).css('background-color', '#ffffff');
    }
}

ko.applyBindings(new ViewModel());

.drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    font: 20pt bold'Vollkorn';
    color: #bbb;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="col-md-12" data-bind="foreach: dropZones">
    <div class="drop_zone" data-bind="event:{
                dragover:   function(data, e){ $root.dragover(e);},
                drop:       function(data, e){ $root.drop(e, $data);},
                dragenter:  function(data, e){ $root.dragenter(e, $index());},
                dragleave:  function(data, e){ $root.dragleave(e, $index());}
            }">Drop files here</div>
    <ul data-bind="foreach: elements" style="height: 100px">
        <li data-bind="text: $data"></li>
    </ul>
</div>

Answer 1

以下是如何从文件中获取图像并将其附加到.preview元素的示例：

function readImage(file) {

    var reader = new FileReader();
    var image  = new Image();

    reader.readAsDataURL(file);  
    reader.onload = function(_file) {
        image.src    = _file.target.result;            
        image.onload = function() {
          $(".preview").append('<img src="' + this.src + '"/>' + '<p>' + this.name +'</p>');
        };     
    };

}

And a fiddle。 HTH。