Question

我似乎无法将图像追加到放置区域ul内的div上。我希望所有图像都水平显示，但是到目前为止，当我将图像从桌面拖到红场什么都没发生。

这是我从互联网上提取的内容。任何帮助表示赞赏。

    var dropZone = document.getElementById('dropZone');

    dropZone.addEventListener('dragover', function(e) {
        e.stopPropagation();
        e.preventDefault();
        e.dataTransfer.dropEffect = 'copy';
    });


    dropZone.addEventListener('drop', function(e) {
        e.stopPropagation();
        e.preventDefault();
        var files = e.dataTransfer.files; 

        for (var i=0, file; file=files[i]; i++) {
            if (file.type.match(/image.*/)) {
            var reader = new FileReader();

            reader.onload = function(e2) {
            // finished reading file data.
            var img = document.createElement('img');
            img.src= e2.target.result;
            node.append(img);
            document.getElementById('image_bar').appendChild(node);
        }

        reader.readAsDataURL(file); .
    }
}
});

<div id="dropZone" style="width: 100px; height: 100px; background-color: red">
    <div><ul id="image_bar"></ul></div>
</div>

Answer 1

首先，您需要删除。在User userID; Scanner input = new Scanner(System.in); userID = input.next();行上，然后在运行代码时，您将在控制台（chrome中的F12）中看到“未定义节点”

此代码有效：

创建一个名为myfile.html的文件，内容如下：

User user1 = new User("user1", "James Smith", "915661829");

Answer 2

这就是我要做的。请阅读代码中的注释

var url = "";


dropZone.addEventListener("dragenter", dragenter, false);
dropZone.addEventListener("dragover", dragover, false);
dropZone.addEventListener("drop", drop, false);

function dragenter(e) {
  e.stopPropagation();
  e.preventDefault();
}

function dragover(e) {
  e.stopPropagation();
  e.preventDefault();
}

function drop(e) {
  e.stopPropagation();
  e.preventDefault();

  var data = e.dataTransfer;
  var files = data.files;

  handleFiles(files);
}


//a function to handle the dragged files
function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    //a regEx to check if the dragged file is an image
    var isImagen = /^image\//;
    //if it's not an image
    if (!isImagen.test(file.type)) {
      continue;
    }
    //but if it's an image
    var img = new Image(); 
    img.src = window.URL.createObjectURL(file);
    img.onload = function() {   
    var w = img.width;
    var h = img.height;
    //append the image to the image_bar
    image_bar.appendChild(img);
    window.URL.revokeObjectURL(this.src);  
      }
  }
}

<div id="dropZone" style="width: 100px; height: 100px; background-color: red">
  <div><ul id="image_bar"></ul></div>
</div>

将图片拖放到div

2 个答案: