Javascript 拖放操作不会按预期发送数据

注意：我是javascript新手。
我有以下代码，允许用户在上传图像之前预览图像。
输入元素工作正常，所选图像按预期显示。
但是，拖放操作会引发一个错误， 未捕获类型错误：无法读取未定义的属性“文件”

我认为我以错误的方式处理掉的文件对象。如果您能提供任何帮助，我将不胜感激。

（函数（$）{
$（文档）.ready（函数（）{
函数呈现（文件）
{
var reader=new FileReader（）；
reader.onload=函数（事件）{
_url=event.target.result
$（“#预览”）.html（“”）
}
reader.readAsDataURL（文件）；
}
//这是用于输入的，工作正常。
$（'#文件'）。更改（函数（）{
渲染（此.files[0]）
});
//阻力是有问题的。
//它会产生以下错误
/*
*未捕获类型错误：无法读取未定义的属性“文件”
*/
$（“#drop”）.on（'dragenter'，函数（e）{
e、 预防默认值（）；
$（this.css（'background'，'BBD5B8'）；
});
$（“#drop”）.on（'dragover'，函数（e）{
e、 预防默认值（）；
});
$（“#drop”）。关于（'drop'，函数（e）{
$（this.css（'background'，'#D8F9D3'）；
e、 停止传播（）；
e、 预防默认值（）；
var dt=e.target.files | |（e.dataTransfer&&e.dataTransfer.files）；
var files=dt.files；
渲染（文件）；
});
});
})（jQuery）

#放下
{
宽度：300px；
高度：100px；
边框：虚线1px；
边界半径：5px；
}

---

我认为问题在于您的HTML。尝试将输入移动到

#drop

div中

<div id = "upload">
  <div id = "drop">
   <input type ="file" id = "file">
  </div>
  <div id = "preview">
  </div>
</div>

---

我的建议是，我还纠正了“未捕获类型错误：无法读取未定义的属性‘文件’”（仅对于FF，需要将输入字段加倍）：

（函数（$）{
$（文档）.ready（函数（）{
函数呈现（文件）
{
var reader=new FileReader（）；
reader.onload=函数（事件）{
_url=event.target.result
$（“#预览”）.html（“”）
}
reader.readAsDataURL（文件）；
}
//这是用于输入的，工作正常。
$（'input[type^=“file”]”）。更改（函数（）{
渲染（此.files[0]）
});
//阻力是有问题的。
//它会产生以下错误
/*
*未捕获类型错误：无法读取未定义的属性“文件”
*/
$（“#drop”）.on（'dragenter'，函数（e）{
event.target.style.background='#BBD5B8'；
});
$（“#drop”）.on（'dragover'，函数（e）{
e、 预防默认值（）；
});
$（“#drop”）。关于（'drop'，函数（e）{
event.target.style.background='#D8F9D3'；
e、 停止传播（）；
e、 预防默认值（）；
var dt=（e.originalEvent.target.files&&e.originalEvent.target.files.length>0）| |（e.originalEvent.dataTransfer&&e.originalEvent.dataTransfer.files）；
var files=dt[0]；
渲染（文件）；
});
});
})（jQuery）
#放下
{
宽度：300px；
高度：100px；
边框：虚线1px；
边界半径：5px；
}
#下降输入{
位置：绝对位置；
排名：0；
右：0；
光标：指针；
不透明度：0.0；
过滤器：alpha（不透明度=0）；
字体大小：300px；
高度：100px；
}
#标签{
位置：绝对位置；
顶部：40px；
宽度：250px；
文本对齐：居中；
}

在这里放一个文件
我希望有两种方法来上传图像（a）使用输入和（b）放置区域。这就是我将它们放在不同位置的原因。您最好使用jQuery文件上传插件。它已经解决了这些问题。DevBridge在这里提供了一个纯Javascript解决方案：谢谢，这正是我想要的。