Как отправить файл в форму с помощью javascript автоматически

Question

У меня есть клиентский JavaScript, который выведет файл jpeg на основе HTML5 canvas манипуляции, если пользователь выполнит действие, например, нажав кнопку «ОК».

Я хотел бы, чтобы выход jpeg автоматически загружался в поле «Загрузить переднюю сторону» в форме, как если бы пользователь загрузил файл со своего собственного жесткого диска.

Однако я не могу заставить его работать.

Вот форма:

<div class="property-wrapper"> 
    <label for="upload-front">Upload Front Side</label> 
    <input id="upload" class="file" type="file" enctype="multipart/form-data" id="Front-Side" name="properties[Front Side]" onchange="readURL(this);" accept="image/*" /> 
</div> 
<script> 
    document.getElementById('upload').value="http://upload.wikimedia.org/wikipedia/commons/thumb/2/22/Turkish_Van_Cat.jpg/353px-Turkish_Van_Cat.jpg" 
</script> 

Answer 1

Проблема заключается в том, что браузеры имеют несколько ограничений на то, что можно сделать программно с загрузкой файла из-за соображений безопасности, посмотрите на это answer.

Функциональность загрузки файлов потенциально может быть использована, и некоторые браузеры, например, не откроют окно проводника, если, например, поле ввода файла скрыто с отображением: none.

Большинство браузеров не допускают программных кликов к элементу загрузки файла и требуют, чтобы пользователь нажимал на них вместо этого, чтобы предотвратить атаки, когда кто-то отправляет ссылку на страницу, которая сразу же крадет содержимое с жесткого диска пользователя.

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

Альтернативой использованию компонента ввода данных для загрузки файлов может быть кодирование содержимого файла в Base64 и отправка, например, в тело ajax POST.

Answer 2

Вы спрашиваете, как загрузить на сервер, с помощью формы, графического изображения, которое вы извлеченной из холста вашей страницы? Это было бы полезно, я надеюсь, что это ответит.

Я бы начал с того, что разрешил пользователю загружать/экспортировать изображение. Это может быть сделано с помощью blob. Ive сделал это для экспорта текстовых данных, работает красиво.

Возможно, есть способ применить те же самые трюки, просто подайте blob/buffer на сервер.

Другим путем может быть «PUT» файл на сервере.

Надеюсь, это поможет.

Answer 3

Я бы сделал ajax POST закодированную строку base64 изображения и забудет весь файл upload thingy. Вы можете загрузить код холста напрямую и переконвертировать его на сервер, если вам нужен предварительный просмотр или что-то или посмотреть, какие другие выходы доступны из вашего кода конвертирования холста/изображения.

Я предполагаю, что вы загружаете на тот же сервер, чтобы у вас не было проблемы с перекрестным доменом, но в противном случае вы можете настроить свой сервер для того, чтобы очень легко принять запрос на перекрестный домен ajax.