Javascript 将图像文件拖放到contenteditable div中：在FF中工作良好，在Chrome中失败惨重

我有一个contenteditable div，我希望用户能够将一个图像文件从他们的计算机拖放到div中。这在FF中可以正常工作，但在chrome中，它不会将文件拖放到div中，而是导航到页面之外，并在浏览器中打开文件。我觉得我一定缺少了一些基本的东西，因为facebook、gmail等都有在Chrome上运行的文件拖放功能

我只是在使用

<div contenteditable='true'></div>

这是一把小提琴

如果我需要在CSS、JS、jQuery或HTML标记中添加任何东西，我都会非常感激，因为它看起来确实很简单

---

在Chrome 34和Chrome Canary 36中试用，非常感谢RobM为我指明了正确的方向。使用您提供的另一个SO答案和您提供的教程链接，这里有一个在FF和chrome中适用的解决方案

（见小提琴：）

HTML

Content Editable Div:
        <div id='d' class='demo' contenteditable='true'>
        </div>

JS

.demo{
    height:400px;
    border:1px solid black;
    overflow-y:scroll;
}

        $(document).ready(function() {
            var handleDrag = function(e) {
                //kill any default behavior
                e.stopPropagation();
                e.preventDefault();
            };
            var handleDrop = function(e) {
                //kill any default behavior
                e.stopPropagation();
                e.preventDefault();
                //console.log(e);
                //get x and y coordinates of the dropped item
                x = e.clientX;
                y = e.clientY;
                //drops are treated as multiple files. Only dealing with single files right now, so assume its the first object you're interested in
                var file = e.dataTransfer.files[0];
                //don't try to mess with non-image files
                if (file.type.match('image.*')) {
                    //then we have an image,

                    //we have a file handle, need to read it with file reader!
                    var reader = new FileReader();

                    // Closure to capture the file information.
                    reader.onload = (function(theFile) {
                        //get the data uri
                        var dataURI = theFile.target.result;
                        //make a new image element with the dataURI as the source
                        var img = document.createElement("img");
                        img.src = dataURI;

                        //Insert the image at the carat

                        // Try the standards-based way first. This works in FF
                        if (document.caretPositionFromPoint) {
                            var pos = document.caretPositionFromPoint(x, y);
                            range = document.createRange();
                            range.setStart(pos.offsetNode, pos.offset);
                            range.collapse();
                            range.insertNode(img);
                        }
                        // Next, the WebKit way. This works in Chrome.
                        else if (document.caretRangeFromPoint) {
                            range = document.caretRangeFromPoint(x, y);
                            range.insertNode(img);
                        }
                        else
                        {
                            //not supporting IE right now.
                            console.log('could not find carat');
                        }


                    });
                    //this reads in the file, and the onload event triggers, which adds the image to the div at the carat
                    reader.readAsDataURL(file);
                }
            };

            var dropZone = document.getElementById('d');
            dropZone.addEventListener('dragover', handleDrag, false);
            dropZone.addEventListener('drop', handleDrop, false);
        });

---

仅供参考-这在IE9中也不起作用@RobM的可能副本。这听起来像是所有的片段都在那里，除了OP说“感谢HTML5，你可以捕捉丢弃事件，并用它捕捉图像。”我该怎么做呢？这是一个关于这个主题的很好的教程：你也可以查找HTML5拖放文件，因为有很多教程。在这个实现中要小心，因为这样图像会作为base64字符串嵌入到HTML中，创建更大的页面，并防止缓存和并行加载，因此，您的页面可能会变得更差。这适用于富格文本编辑器，其中数据提交到服务器，服务器将清除base64 URL并将其转换为图像文件，并用新图像文件的路径替换

src

属性，因此这不是问题。太好了！，许多人可能只是复制这段代码而没有意识到你的后端，他们可能最终会得到一个可怕的CMSMy目标就是复制FF中的默认行为，这正是它所做的