在div上拖放圖像

Question

我似乎無法將圖像附加到dropzone div的ul 。我希望所有圖像都水平顯示，但到目前為止，當我將圖像從桌面拖到紅色方塊時，沒有任何反應。

這是我從互聯網上提取的東西。 任何幫助表示贊賞。

    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

首先，你需要刪除。 在線reader.readAsDataURL(file); . reader.readAsDataURL(file); . 然后當您運行代碼時，您將在控制台（Chrome中的F12）中看到“節點未定義”

這段代碼有效：

使用以下內容創建名為myfile.html的文件：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hi</title>
</head>

<body>
<div id="dropZone" style="width: 100px; height: 100px; background-color: red">
    <div><ul id="image_bar"></ul></div>
</div>
  <script>
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;
                document.getElementById('image_bar').appendChild(img);
            }

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

</script>
</body>
</html>

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 個解決方案

解決方案1
0 2019-05-28 14:47:19

解決方案2
0 2019-06-02 18:44:29

在div上拖放圖像

問題描述

2 個解決方案

解決方案1 0 2019-05-28 14:47:19

解決方案2 0 2019-06-02 18:44:29

解決方案1
0 2019-05-28 14:47:19

解決方案2
0 2019-06-02 18:44:29