拖放和渲染缩略图

Question

我试图阻止n＆＃39;在JS中删除上传文件。我编写的代码如下：

<div id="drop_zone">
 <div style="clear: both"></div>
</div>

<output id="list"></output>
<script type="text/javascript">
var Vector = function() {
 var _array = [];
 this.add = function(item) {
  _array.push(item);
 };
 this.delete = function(index) {
  _array.splice(index, 1);
 };
 this.foreach = function(callback) {
  for(i=0; i<_array.length; i++) {
   callback(_array[i]);
  }
 };
 this.length = function() {
  return _array.length;
 };
 this.clear = function() {
  _array = [];
 };
};

var Snap = function(args) {
 this.name = args.name || null;
 this.type = args.type || null;
 this.size = args.size || null;
 this.modified = args.modified || null;
 this.source = args.source || null;
}

var images = new Vector();

function handleFileSelect(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 var files = evt.dataTransfer.files;
 if(files.length != 0) {
  for(var i=0, f; f = files[i]; i++) {
   var image = new Snap({
    name : escape(f.name),
    type : f.type||'n/a',
    size : f.size,
    modified : f.lastModifiedDate ? f.lastModifiedDate.toLocaleString() : 'n/a'
   });
   var file = files[i];
   var filereader = new FileReader;
   filereader.onload = function(e) {
    image.source = this.result;
   };
   filereader.readAsDataURL(file);
   images.add(image);
  }
 }
 alert(images.length());
 render();
}

function render() {
 var list = document.getElementById('list');
 images.foreach(function(elem) {
  var div = document.createElement('div');
  var divtext = elem.name + '(<i>' + elem.type + '</i>), ' + elem.size + ' <small>[' +    elem.modified + ']</small>';
  div.innerHTML = divtext;
  list.appendChild(div);

  var img = document.createElement('img');
  img.src = elem.source;
  document.getElementById('drop_zone').appendChild(img);
 });
}

function handleDragOver(evt) {
 evt.stopPropagation();
 evt.preventDefault();
 evt.dataTransfer.dropEffect = 'copy';
}

var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);
</script>

它没有按我的意愿工作。

此视图是在我第一次拖动图像之后。 images.length = 1

此视图是在我第二次拖动图像之后。 images.length实际上= 2，而不是3，因此矢量图像可以正常工作。

第三次拖动后查看同一个图像。 images.length = 3，而非6，所以说到Vector，没关系。

我还不知道如何让它发挥作用。 提前谢谢。