Как передать входной файл изображения в другой вход?

Question

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

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

<div>
<input type="file" onchange="readURL(this); recognizeFile(window.lastFile=this.files[0])">

<img id="blah" src="#"/>
</div>

HTML - Отображение изображения после выбора имени файла

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

Answer 1

Под звуки того, что вы хотите, это простая проблема стиля, используйте CSS.

Код CSS display: inline-block заставит элементы появляться рядом друг с другом, а не сверху и снизу.Измените код так, чтобы он соответствовал следующим образом:

<img id="blah" src="#" alt="your image" style="display: inline-block;"/>
<input type="file" onchange="readURL(this);"/>

Я бы посоветовал вам взглянуть на CSS, он немного сложен, и его поведение на первый взгляд может показаться странным, хотя это и невозможно.Ваша лучшая помощь будет в поиске в Интернете (лично W3Schools - хороший выбор) и Chrome DevTools .

---

Я адаптировался из вашего ответа связанный , и предполагается, что ваш код совпадает с его ответом.

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