拖放文件输入
[英]Drag and Drop File Input
问题描述
I'm trying to drag a file into a div box and do 2 things: 
我正在尝试将文件拖到div框中并做2件事：
- Change the color of the
divbox.更改div框的颜色。 - Fill up the
<input type="file">element in the form with the dragged file.用拖动的文件填充表单中的<input type="file">元素。
Here is what I have so far in my code. 到目前为止，这就是我的代码。 I have tried dragging a file to the div box, but when I do, it keeps redirecting the page to display the contents of the dropped file. 我曾尝试将文件拖到div框中，但是当我这样做时，它会一直重定向页面以显示已删除文件的内容。 Please help and thank you! 请帮忙，谢谢！
function processFile(file) { file.preventDefault(); document.body.style.backgroundColor = "lightgreen"; document.getElementById('fileInput').value = file; document.getElementById('fileForm').submit(); }
#box { background-color: lightblue; height: 100px; width: 100px; }
<html> <head> <title>Drag and Drop</title> </head> <body> <h1>Drag and Drop</h1> <div id="box" ondrop="processFile(file)">Drop here</div> <br> <form method="post" id="fileForm" action="/submitFile"> <input type="file" name="submission" id="fileInput"> <input type="submit" value="Send"> </form> </body> </html>
3 个解决方案
解决方案1
0 2019-08-06 23:51:13
Take a look at this Codepen from Joe Zim that has the drag-and-drop functionality. 看看Joe Zim提供的具有拖放功能的Codepen 。
You could modify the JS to change the background color of the element as well using: 您还可以使用以下方法修改JS来更改元素的背景色：
document.getElementById('id-of-element-to-change-color').style.backgroundColor = 'gray'
inside the function. 在函数内部。
解决方案2
0 2019-08-06 23:54:35
- You need to set event
ondragover您需要设置事件ondragover - The parameter of
ondropiseventnotfile.ondrop的参数是eventnotfile。
function processFile(event) { event.preventDefault(); document.body.style.backgroundColor = "lightgreen"; document.getElementById('fileInput').value = event.dataTransfer.getData('file'); document.getElementById('fileForm').submit(); } function allowDrop(event) { event.preventDefault(); // change your color here }
#box { background-color: lightblue; height: 100px; width: 100px; }
<html> <head> <title>Drag and Drop</title> </head> <body> <h1>Drag and Drop</h1> <div id="box" ondrop="processFile(event)" ondragover="allowDrop(event)">Drop here</div> <br> <form method="post" id="fileForm" action="/submitFile"> <input type="file" name="submission" id="fileInput"> <input type="submit" value="Send"> </form> </body> </html>
解决方案3
0 2019-08-07 00:10:06
First, You can not set value of input file type by javascript due to security reasons (imagine web pages that steal your PC contents without your action), so don't use input file, but some div. 首先，由于安全原因（您可以想象网页会在不采取任何措施的情况下窃取您的PC内容），因此无法通过javascript设置输入文件类型的值，因此请不要使用输入文件，而要使用div。
However, you can read the file that was dropped. 但是，您可以读取已删除的文件。 The drag/drop event object, DragEvent interface, has a e.dataTransfer property, which you can feed to FormData and then send it via AJAX . 拖放事件对象DragEvent接口具有e.dataTransfer属性，您可以将其提供给FormData ，然后通过AJAX发送 。
Having the mentioned reference at hand, you can follow this step by step tutorial . 有了提到的参考资料，您可以按照本教程逐步进行 。 The CSS part in your example is OK. 您的示例中的CSS部分是可以的。 Good luck. 祝好运。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.