javascript — загрузка веб-изображения в модуле require.js

Question

javascript — загрузка веб-изображения в модуле require.js

Я использую инструмент веб-маркировки для создания изображения с веб-сайта, однако я хочу изменить функцию так, чтобы, когда я закончил с маркировкой, вместо того, чтобы загружать изображение на локальный компьютер, я хочу, чтобы оно было загружено на сервер. Функция находится в файле javascript, и вся загрузка, связанная с JS, связана с отправкой форм. Там нет формы и суперглобальных, как я должен загрузить изображение, созданное в Интернете на сервер?

Вот код, который у меня сейчас есть, он не в html-файле, а в js-файле.

var file_data = annotator.export();
var formData = dataURItoBlob(file_data);
var fd = new FormData(document);
fd.append("resultImage",formData);
url="upload/";
http.open("POST", url, true);

// headers
http.setRequestHeader("Content-type", "application/x-www-form-     urlencoded");
http.setRequestHeader("Content-length", fd.length);
http.setRequestHeader("Connection", "close");

http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}

http.send(fd);

php файл

<?php
$upload_dir = "upload/";
$img = $_POST['hidden_data'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir . mktime() . ".png";
$success = file_put_contents($file, $data);
print $success ? $file : 'Unable to save the file.';
?>

Очень ценю вашу помощь, спасибо.

0

ajax javascript php requirejs

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

dataURItoBlob(file_data); по названию функции похоже, что она будет возвращать объект blob. объекты BLOB / файла при загрузке в сценарий php будут находиться в $_FILES глобальный, а не $_POST, И вы бы использовать move_uploaded_file переместить его в желаемое место назначения.

Также вы, кажется, используете неправильный индекс. Ты используешь hidden_data в вашем PHP, но вы установили имя resultImage в вашем JavaScript. Вы должны будете использовать то же имя в php, что и в javascript.

Так что ваш PHP-код должен выглядеть примерно так

$upload_dir = "upload/";
$img = $_FILES['resultImage'];
if($img["error"] == UPLOAD_ERR_OK){
//should do other sanitation like making sure the file
//that is uploaded is the actual type of file you expect
$path = $upload_dir . mktime() . ".png";
move_uploaded_file($img["tmp_name"], $path);
}

Как примечание, при использовании объекта FormData вам не нужно устанавливать заголовки запроса, такие как Content-Type как они будут автоматически установлены API.

0