拖放后如何将图像上传到服务器答案

【问题标题】：How do you upload an image to server after drag and drop拖放后如何将图像上传到服务器
【发布时间】：2012-07-31 18:12:52
【问题描述】：

我已经完成了整个拖放操作，但是您如何将其上传到服务器？我可以得到一些base64编码的图像的dataURL。有没有办法将它上传到我的 servlet 以及 servlet 如何接受这个？ This tutorial 很有帮助，但缺少上传部分。我还查看了其他 JQuery 插件，这些插件似乎是为我定制的并且很重。

【问题讨论】：

图片最初来自哪里？
@Diodeus 来自用户桌面。
如果用户还没有上传图片到服务器，你是如何使用图片的呢？
我不明白。我将图像本地存储在我的机器（桌面）上。我想在将其从桌面拖放到浏览器后将其上传到服务器。

标签： javascript html servlets drag-and-drop

【解决方案1】：

一种选择是使用这个：

http://www.plupload.com/

虽然它带有 UI，但它还带有 JS 库，您可以通过编程方式将文件发送到服务器。 UI 和编程部分是单独的 js 文件，因此您不必用不必要的 JS 将您的网站弄得一团糟...

我大力提倡不要重新发明轮子...:-)

【讨论】：

是的，我也在我的一个项目中使用 plupload。如果浏览器不支持 HTML5 进行拖放，我也喜欢它如何优雅地降级。如果不出意外，如果您只是想自己了解，请查看 plupload 代码，看看他们是如何处理它的。

【解决方案2】：

经过更多搜索，我发现使用 JavaScript 的 FormData 对象提交文件非常容易。从dataTransfer.files获取图片文件后，这部分的拖拽API，下面的代码就可以成功的将图片文件发送到服务器了。

// Create formdata object
var formData = new FormData;
// Append form item (key, value)
formData.append('file', imageFile);

// JQuery ajax call to submit the file using post request
$.ajax({
    url: 'url_of_server_script',
    data: formData,
    processData: false,
    contentType: false,
    type: 'POST',
    success: function(data){
        alert(data);
    }
});

【讨论】：