Тип ввода = «файл» set base64 данные изображения

Question

У меня есть холст и извлекается из него данные изображения с помощью canvas.toDataURL('image/png').

Проблема:<input type="file" /> хочет, чтобы путь к файлу был value вместо данных base64.

Вопрос:Как отправить данные base64 изображения на сервер с помощью <input type="file" /> без сохранения их в локальной файловой системе?

Мои обходные: Пробовал скрытый ввод <input type="file" />, но сервер требует имя файла свойства

Может быть, это можно преодолеть это с XmlHttpRequest?

Answer 1

Вы можете использовать FileReader, проверить примеры здесь: https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications

Answer 2

Просто создать скрытый элемент ввода в форму. (Обратите внимание на тип )

<input type="hidden" name="myHiddenField"> 

Приложите свои данные к значению элемента перед отправкой.

var imageData = canvas.toDataURL('image/png'); 
document.getElementsByName("myHiddenField")[0].setAttribute("value", imageData); 

UPDATE

Если ваши требования сервера, чтобы иметь параметр «имя файла» в представленных данных, а затем включить эту строку в качестве имени input элемента.

<input type="hidden" name="filename"/> 

Это аннулирует форму для отправки ваших данных с параметром «имя файла», включенным в нее.

Если вы хотите использовать XMLHttpRequest для этого, Ниже приведен пример:

//Prepare data to be sent 
var imageData = canvas.toDataURL('image/png'); 
var params = "filename=" + imageData; 

//Initiate the request 
var httpRequest = new XMLHttpRequest();    
httpRequest.open('POST', 'test.php', true); 

//Send proper headers 
httpRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
httpRequest.setRequestHeader("Content-length", params.length); 
httpRequest.setRequestHeader("Connection", "close"); 

//Send your data 
httpRequest.send(params);