Question

我是ruby on rails的新手，我正在尝试一些代码来拖放图片。但是，我只将图像从我的dragbox拖到html中的Dropbox，但是我无法将图像从桌面拖到我的Dropbox中。有我的代码：

我的javascript

<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 id="pic" src="/assets/Koala.jpg" />
</section>

我的css

#leftbox{
    float: left;
    width: 250px;
    height: 250px;
    margin: 5px;
    border: 3px solid blue;
}
#rightbox{
  float: left;
  width: 250px;
  height: 250px;
  margin: 5px;
  border: 3px solid green;
};

如何从桌面拖放图像？拜托，帮助我

Answer 1

在处理文件的情况下，您应该将dropped处理程序修改为：

  function dropped(e) {
    e.preventDefault();
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      var file = files[i];
      // now you are free to do whatever you want with file, e.g.: 
      new FileReader().readAsDataURL(file);
    }
  }

您可能还想查看W3C specification 希望它有所帮助。

如何拖动;将图像从桌面拖放到Dropbox

1 个答案: