javascript - 使用淘汰赛js从按钮转换为拖放文件上传

Question

我正在尝试使用一些新功能更新旧项目。它是用淘汰赛 js 和 jQuery 编写的，并提供按下按钮后上传文件的功能。该应用程序打开系统对话框，用户可以在其中选择要上传的文件。

我想要它做的是使用 Dropbox 复制相同的功能，用户可以在其中拖放他的文件。这是代码：

HTML：

<input type="file" id="files" name="files[]" multiple data-bind=" event:{change: $root.fileSelect}" />
<output id="list"></output>
<div id="drop_zone" data-bind="event:{
      dragover: function(data, e){ $root.fileSelect;},
      drop: $root.fileSelect}">
  Drop files here
</div>
<ul>    
    <!-- ko foreach: files-->
    <li><span data-bind ="text: name"></span>: <img class="thumb" data-bind = "attr: {'src': src, 'title': name}"/></li>
    <!-- /ko -->  
</ul>

淘汰赛JS：

var ViewModel = function() {
    var self = this;     
    self.files=  ko.observableArray([]);
    self.fileSelect= function (elemet,event) {
        var files =  event.target.files;// FileList object
        
        // Loop through the FileList and render image files as thumbnails.
        for (var i = 0, f; f = files[i]; i++) {

          // Only process image files.
          if (!f.type.match('image.*')) {
            continue;
          }          

          var reader = new FileReader();

          // Closure to capture the file information.
          reader.onload = (function(theFile) {
              return function(e) {                             
                  self.files.push(new FileModel(escape(theFile.name),e.target.result));
              };                            
          })(f);
          // Read in the image file as a data URL.
          reader.readAsDataURL(f);
        }
    };
};

var FileModel= function (name, src) {
    var self = this;
    this.name = name;
    this.src= src ;
};

ko.applyBindings(new ViewModel());

一些 CSS 使它看起来正确：

.thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
}

#drop_zone {
  width: 200px; 
  text-align: center;
  border: 2px dashed #bbb;
  border-radius: 5px;
  padding: 25px;
  margin: 10px;
}

#drop_zone:hover {
  border: 2px solid #bbb;
  background-color: lightgrey;
}

当我使用按钮时，一切看起来都正确。但是我对淘汰赛的了解非常有限，所以我无法让保管箱像这个按钮一样工作。如果有人能指出我正确的方向，我将不胜感激！

标签： javascriptfile-uploadknockout.js