javascript - js：如何创建一个我可以拖放文件上传的 div

Question

在 CSS 中有这个：

#drop_zone {
    border: 2px dashed #bbb;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 25px;
    text-align: center;
    background-color: white;
}

然后div在我的 HTML 中：

<div id="drop_zone"><span style="color: darkgray">Drop files here.</span></div>

我以前编写过 javascript 来拦截处理程序并在本地解析文件，但现在我正在与 Flask 后端进行交互，并且只想将文件作为上传事件传递，绕过标准形式：

<form action="" method=post enctype=multipart/form-data>
    <p><input type=file name=file>
        <input type=submit value=Upload>
</form>

有没有一种简单的方法可以在 javascript 中做到这一点？

此外，以 Gmail 的风格做一些事情会很棒，它为您提供了一个标准的上传选项（我一直在研究 jasny 的上传小部件，但一直有一些胃灼热）然后，当您拖动文件时到 div 上，它为您提供了拖放选项。

Answer 1

您在这里要求的所有内容都在我维护的跨浏览器上传库中提供：Fine Uploader。恕我直言，重新发明轮子是没有意义的。查看自述文件和演示，看看它是否适合您的需求。