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

Posted 2023-05-07

【中文标题】如何将拖放图像保存到服务器？

【英文标题】：How can I save a drag and dropped image to the server?

【发布时间】：2018-06-11 03:19:18

【问题描述】：

首先，背景。 一切都在企业防火墙之后，因此无法显示实时版本或访问诸如 nodeJS 或许多库之类的漂亮工具。

我有 html、php 5、javascript 和 jquery1.9。

我有一个包含大量数据的 Web 窗口。我想让用户能够将一张名为侦探图像的图片放入一个盒子中，显示该盒子，并将该图像保存在我服务器上的一个特殊位置。侦探图像是在不同的内部服务器上动态生成的图，我对（另一个部门）没有任何权限。虽然它可以命名为任何名称，但我想用一个特定的名称保存它，以便稍后重新加载此数据的 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保存为“sleuthImg.png”

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

【参考方案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);

【讨论】：

感谢您的回复。虽然这是一个合理的建议，但由于进一步的复杂性，它并不能解决我的特定问题。我将检查它是否已解决并从另一个角度解决这个问题。