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

Question

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

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

在这里查看

 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元素的.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>');
        };     
    };

}

和一个小提琴 。 HTH。