Показывать изображение перед загрузкой javascript/jquery

Question

Я пытаюсь реализовать функциональность сообщения. В этом случае пользователю разрешено загружать изображение. Моя функция загрузки работает нормально. Но я хочу просмотреть изображение, которое пользователь хочет загрузить, прежде чем он на самом деле нажмет кнопку отправки. Мой рабочий код для ввода изображения пока <input name="attach" type="file" id="attach" /> Я много искал и пришел к выводу, что мне нужно будет использовать java-скрипт или j-запрос для этого, я создал функцию onchange="readURL(this);" и поместил ее в input. Я также создал тег изображения, в котором будет отображаться изображение. <img id="preview_img" style="max-width: 130px; max-height: 130px; display: none" src=""/> Отсюда я смущен. Как изменить изображение src с помощью java-скрипта или какое значение я его изменю?

Answer 1

вы можете поместить это в каком-то событии JQuery ('щелчок', 'нагрузки', не уверен, когда вы хотите, чтобы это произошло).

$ ('# preview_img') атр ('ЦСИ', " ... ');

Answer 2

Установите data URI с изображением на атрибут src. Пока у вас нет изображения, загруженного на сервер, вы можете загрузить его содержимое контента в формате URI данных на FileReader.readAsDataURL в readURL, где у вас есть доступ к выбранному файлу либо через event.target.files, либо через this, который вы отправляете там в вашем коде.

Посмотрите на an answer to a similar problem; он обращается к элементу input по его идентификатору, но вы можете легко адаптировать его для использования элемента, который вы отправляете, в readURL.