Javascript 拖放输入文件

我有一个非常标准的表单来提交图像：

<form enctype="multipart/form-data" class="form-horizontal" role="form" method="POST">
<input id="image" name="image" type="file"/>
</form>

我希望能够将图像拖动到某个区域，以便将其选定为输入

---

我曾在互联网上研究过如何完成如此简单的任务，但我只得到了使用AJAX的过多插件，遗憾的是，这不是这种表单的选项。有人知道怎么做吗？

只需将图像拖到输入中即可。如果您需要一些关于如何处理您的拖放图像的结果（link/title/src或类似的东西）的信息，请访问这个

功能手柄文件选择（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
var files=evt.dataTransfer.files；//文件列表对象。
//文件是文件对象的文件列表。请列出一些属性。
var输出=[]；
for（var i=0，f；f=files[i]；i++）{
output.push（“
”，escape（f.name），“（”，f.type | | |“n/a”，“）-”，
f、 大小，'字节，上次修改：'，
f、 lastModifiedDate？f.lastModifiedDate.toLocaleDateString（）：“不适用”，
“
”）；
}
document.getElementById（'list'）.innerHTML='
'+output.join（''）+'
'；
}
功能手柄（evt）{
evt.stopPropagation（）；
evt.preventDefault（）；
evt.dataTransfer.dropEffect='copy'；//显式显示这是一个副本。
}
//设置dnd侦听器。
var dropZone=document.getElementById（'drop_zone'）；
dropZone.addEventListener（'Dragver'，handleDragOver，false）；
dropZone.addEventListener（'drop'，handleFileSelect，false）
。示例{
填充：10px；
边框：1px实心#ccc；
}
#降落区{
边框：2个虚线#bbb；
-moz边界半径：5px；
-webkit边界半径：5px；
边界半径：5px；
填充：25px；
文本对齐：居中；
字体：20磅粗体“沃尔科恩”；
颜色：#bbb；
}

把文件放在这里






容易解决

这里已经非常彻底地回答了这个问题。你唯一需要的是jquery，没有ajax：有很多很好的库可以这么做，我用的很酷，你应该看看。参考这个答案，经过测试和工作：我想这就是你要找的=）