Question

我是html 5中的新手，我正在尝试从桌面删除图像的代码，但我的代码不起作用。这是我的代码：

script>
    function OnDropTextarea(event) {
        if (event.dataTransfer) {
            if (event.dataTransfer.files) {
                var leftbox = document.getElementById("leftbox");
                for (var i = 0; i < event.dataTransfer.files.length; i++) {
                    var file = event.dataTransfer.files[i];
                    leftbox.innerHTML += file;
                }
            } else {
                alert("Your browser does not support the files property.");
            }
        } else {
            alert("Your browser does not support the dataTransfer property.");
        }
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
        return false;
    }
</script>
<section id="leftbox" ondrop="return OnDropTextarea (event);"></section>

所以，拜托！帮助我

我尝试新代码，但我只能在其他框中拖放框，而不是从桌面拖放。另一个代码：

<script>

    function doFirst() {
        mypic = document.getElementById('pic');
        mypic.addEventListener("dragstart", startDrag, false);

        leftbox = document.getElementById('leftbox');
        leftbox.addEventListener("dragenter", function(e) {
            e.preventDefault()
        }, false);
        leftbox.addEventListener("dragover", function(e) {
            e.preventDefault()
        }, false);
        leftbox.addEventListener("drop", dropped, false);
    }

    function startDrag(e) {
        var code = '<img src="/assets/Koala.jpg">';
        e.dataTransfer.setData('Text', code);
    }

    function dropped(e) {
        e.preventDefault();
        leftbox.innerHTML = e.dataTransfer.getData('Text');
    }
    window.addEventListener("load", doFirst, false);

</script>
<section id="leftbox">
</section>
<section id="rightbox">
    <img src="/assets/Koala.jpg" id="pic"/>
</section>

Answer 1

您需要覆盖dragover和dragenter并阻止默认操作，以使元素有资格成为有效的放置目标。 MDN

编辑：我认为下降应该可行（我的代码之间的唯一区别似乎是我e.dataTransfer.dropEffect = "copy"中的dragover和dragenter处理程序）。我希望人们更明确地说“不工作” - 是否发生了下降，但你没有得到文件内容？

如果是这种情况，问题可能是您将File对象视为字符串。所以，而不是这个，

leftbox.innerHTML += file;

试试这个：

var reader = new FileReader();
reader.onload = function(e) { leftbox.innerHTML += e.target.result; };
reader.readAsText(file);

Answer 2

ondrop="return OnDropTextarea (event);"

应该是：

ondrop="OnDropTextarea()"

Answer 3

这可能对您有用，但您必须使用jquery库

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Upload images with Jquery</title>
        <script src="jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                var obj = $("#dragandrophandler");
                obj.on('dragenter', function (e) 
                {
                    e.stopPropagation();
                    e.preventDefault();
                    //$(this).css('border', '2px solid #0B85A1');
                });
                obj.on('dragover', function (e) 
                {
                    e.stopPropagation();
                    e.preventDefault();
                });
                obj.on('drop', function (e) 
                {   //alert('');
                    e.preventDefault();
                    /*$(this).css('border', '2px dotted #0B85A1');*/
                    var files = e.originalEvent.dataTransfer.files;
                    var data = new FormData();
                    var i=0,l=files.length;
                    for (i = 0; i < l; i++) {
                         data.append('file' + i, files[i]);
                    }

                    $.ajax({
                        url: 'load.php',
                        type: 'POST',
                        contentType: false,
                        data: data,
                        processData: false,
                        cache: false
                    }).done(function(msg) {

                    });
                });

                $(document).on('dragenter', function (e) 
                {
                    e.stopPropagation();
                    e.preventDefault();
                });
                $(document).on('dragover', function (e) 
                {
                    e.stopPropagation();
                    e.preventDefault();
                    //obj.css('border', '2px dotted #0B85A1');
                });
                $(document).on('drop', function (e) 
                {
                    e.stopPropagation();
                    e.preventDefault();
                });
            });
        </script>
        <style type="text/css">
            #dragandrophandler {
                border: 2px dashed #ccc;
                width: 300px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div id="dragandrophandler">
            Drop files here
        </div>
        <div id="meta"></div>
    </body>
</html>

无法使用html5从桌面删除图像

3 个答案: