如何将拖放的图像保存到服务器？

Question

首先是背景。 一切都在公司防火墙之后，因此没有显示实时版本或访问像nodeJS或许多库之类的漂亮工具。

我有HTML，php 5，javascript和jquery1.9。

我有一个包含大量数据的Web窗口。 我希望用户能够将名为“ sleuth image”的图片放到一个盒子中，显示该盒子，然后将该图像保存在服务器上的特殊位置。 侦探图像是在另一个我没有任何特权（另一个部门）的内部服务器上动态生成的图形。 虽然可以命名为任何名称，但我想用一个特定的名称保存它，以便稍后在重新加载此数据的Web窗口时正确显示它。

我有这个javascript函数，可让他们放下图像并显示它。 我只需要它即可将图像保存为.png。

  function drop_handler(event) { // this is part of the ability to drag sleuth images onto the OOC // Prevent default behavior (Prevent file from being opened) event.preventDefault(); var items = event.dataTransfer.items; for (var i = 0; i < items.length; i++) { var item = items[i]; if (item.kind === 'string') { item.getAsString(function(data) { document.getElementById("sleuth").innerHTML = data; }); } } } 

我需要将显示在变量“ data”中的img src保存为AS“ sleuthImg.png”

是的，我知道我需要添加验证。 首先，我需要这部分来工作。

Answer 1

首先，您将需要服务器上的一个端点，该端点可以接受并存储文件。 假设您已经拥有该部分，那么：

从dataTransfer对象获取文件https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/files

然后创建一个新的FormData https://developer.mozilla.org/en-US/docs/Web/API/FormData

var formData = new FormData();
formData.append('file', fileFromDataTransfer);
formData.append('mime_type', fileFromDataTransfer.type);

（其中'file'是服务器期望的post参数的名称。 'mime_type'是示例中包含的另一个表单数据参数）

然后，使用您选择的请求制作库，使用表单数据发出POST请求。

post('your/upload/endpoint', formData);