Как я могу сохранить перетаскиваемое изображение на сервер? - PullRequest
Новая
       22

Как я могу сохранить перетаскиваемое изображение на сервер?

0 голосов
/ 11 июня 2018

Прежде всего, фон.Все скрыто за корпоративным брандмауэром, поэтому нет показа живой версии или доступа к изящным инструментам, таким как nodeJS или многим библиотекам.

У меня есть HTML, php 5, javascript и jquery1.9.

У меня есть веб-окно с кучей данных.Я хочу, чтобы пользователи могли помещать изображение, называемое изображением спящего, в ящик, показывать этот ящик и сохранять это изображение в специальном месте на моем сервере.Образ Sleuth - это динамически генерируемый граф на другом внутреннем сервере, на который у меня нет никаких привилегий (другой отдел).Хотя оно может называться как угодно, я хочу сохранить его под определенным именем, чтобы оно позже отображалось правильно при перезагрузке веб-окна для этих данных.

У меня есть эта функция 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;
				});
			}
		} 
	}

Мне нужно сохранить img src, который отображается в переменной "data" AS "sleuthImg.png"

Да, я знаю, что мне нужнодобавить проверку.Во-первых, мне нужна эта часть для работы.

1 Ответ

0 голосов
/ 11 июня 2018

Во-первых, вам понадобится конечная точка на сервере, которая может принимать файлы и хранить их.Если у вас уже есть эта часть, то:

Получите файл из 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);
...