Question

我试图通过拖放（来自文件浏览器的另一个图像）来替换图像，但我不知道如何。有什么想法吗？

HTML

 <div id="drop-zone">
     <div class="insidzoneDropped">
         <img src="/images/folderdropped-icon.png" />
     </div>
 </div>

JS

 function handleDragEnter(e) {
     e.stopPropagation();
     e.preventDefault();
     //e.dataTransfer.setData("Id",    e.target.id+"|"+e.target.parentNode.id);
 }
 function handleDrop(e) {
     e.stopPropagation();
     e.preventDefault();
 }
 var dropZone = document.getElementById('drop-zone');
 dropZone.addEventListener('dragenter', handleDragEnter, false);
 dropZone.addEventListener('drop', handleDrop, false);

Answer 1

尝试阅读前两篇文章here。它们是详细的，因此您要么学习超出此特定任务所需的知识，要么过滤不必要的信息并尝试运行并实现您的需要。第一个是关于使用拖放本身，第二个是告诉你如何处理丢弃的文件内容（这也是你需要的一个例子）。

一个重要的注意事项：如果你想拖放并让图像获得本地文件的实际路径，请知道由于安全限制，这是不可能的。您可以获得的是文件的内容（除非您将图像保存到服务器，否则图像将被base64编码）。

Javascript：用拖放替换图像

1 个答案: