使用Drag＆amp; amp;和HTTP文件上传立即删除和文件下载

Question

我的应用程序基本上转换图像。上传图像时，它会在服务器上处理，服务器会将结果作为附件发回，从而立即下载。

它已经可以使用纯HTML表单，例如

<form action="/icon" method="post" enctype="multipart/form-data">
    <input type="file" name="image"/>
    <input type="submit" value="Create"/>
</form>

服务器以标题Content-Disposition=attachment; filename=\"processed.zip\"等响应

当然，股票<input type="file"...>看起来非常难看，我想给它一个不同的造型。此外，为了改善用户体验，我想支持拖拽和娱乐。删除文件上传。

然而，所有文件上传框架或只是基于JavaScript的拖拽＆amp; drop只支持类似“AJAX”的上传（使用XMLHTTPRequest）。然而，然而，立即下载不起作用。

有没有办法，技巧，解决方案？

Answer 1

到目前为止，我发现只有以下解决方案。它涉及JavaScript框架Dropzone.js，但可以与任何其他JavaScript实现一起使用。

• 处理阻力＆amp;删除并使用JavaScript上传
• 服务器以Base64编码
返回zip文件
• 创建data: URI
• 使用JavaScript创建创建临时<a>元素并执行click事件（如this StackOverflow answer中所述）

此解决方案仅适用，因为结果小于32 KB。在谷歌浏览器和Firefox中，下载甚至还有足够的文件名。很遗憾，它在Safari中不起作用。