Почему при загрузке изображения не отображается текст предварительного просмотра изображения?

Я настроил кнопку загрузки формы и скрыл поле input с помощью css display:none, но когда я выбираю изображение, ввод не показывает текст предварительного просмотра!

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

HTML:

<div class = "form-group">
    <label for = "before_image" class = "custom-file-upload"><i class = "fa fa-cloud-upload"></i> Before Image*</label>
    <input type = "file" id = "before_image" name = "before_image" class = "form-group" placeholder = "Before Image" data-bind = "value: before_image">                        
    <span>No file chosen</span>
</div>

CSS:

.custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}
input[type=file] {
    display: none;
}

 input[type=file]{
    display:none;
}
 .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<div class = "form-group">
	<label for = "before_image" class = "custom-file-upload"><i class = "fa fa-cloud-upload"></i> Before Image*</label>
	<input type = "file" id = "before_image" name = "before_image" class = "form-group" placeholder = "Before Image" data-bind = "value: before_image">                        <span>No file chosen</span>
</div>

Обновлено: Я перепробовал все эти решения (Как отобразить имя файла для входного файла с пользовательским стилем с помощью jquery?), но ни одно из них мне не помогло. В моем сценарии у меня есть две кнопки загрузки: одна — before image upload, а вторая — after image upload, как показано на видео.

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

Возможный дубликат Как отобразить имя файла для входного файла с пользовательским стилем с помощью jquery?

— 30.05.2019 12:33

javascript jquery html css

30.05.2019 12:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

404

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Это не работает, потому что ваш <span>No file chosen</span> статичен.

Пытаться:

<div class = "form-group">
    <label for = "before_image" class = "custom-file-upload"><i class = "fa fa-cloud-upload"></i> Before Image*</label>
    <input type = "file" id = "before_image" name = "before_image" class = "form-group" placeholder = "Before Image" data-bind = "value: before_image">                        
    <span id = "images"></span>
</div>

<script type = "text/javascript">
var field = document.getElementById('before_image');
var span = document.getElementById('images');

field.addEventListener('change', function() {
    var img = document.createElement('img');
    img.src = field.files[0].getAsDataURL();
    span.appendChild(img);
});
</script>

Ошибка консоли: Uncaught TypeError: field.files.item(...).getAsDataURL не является функцией

— 30.05.2019 12:41

Попробуйте еще раз, я исправил. field.files[0].getAsDataURL();

— 30.05.2019 12:54

Спасибо за ответ, но все равно написано: Uncaught TypeError: field.files[0].getAsDataURL is not a function

— 30.05.2019 12:58

30.05.2019 12:33

Ответ принят как подходящий

Просто добавьте новую функцию в файл типа ввода в событии onchange. Пожалуйста, найдите прикрепленный код.

 input[type=file]{
    display:none;
}
 .custom-file-upload {
    border: 1px solid #ccc;
    display: inline-block;
    padding: 6px 12px;
    cursor: pointer;
}

<div class = "form-group">
	<label for = "before_image" class = "custom-file-upload"><i class = "fa fa-cloud-upload"></i> Before Image*</label>
	 <input type = "file" id = "before_image" name = "before_image" class = "form-group" placeholder = "Before Image" data-bind = "value: before_image" onChange = "((e)=>{
file = e.target.files.item(0);
var fr = new FileReader;
fr.onloadend =(imgsrc)=>{
 	imgsrc = imgsrc.target.result; // file reader
var img = document.createElement('img');
   	img.src =imgsrc;
this.nextSibling.nextSibling.innerHTML='';
this.nextSibling.nextSibling.appendChild(img);
};
fr.readAsDataURL(file);
})(event)">
<span>No file chosen</span>
</div>

30.05.2019 13:37

Другие вопросы по теме

Скрыть элемент с помощью JQuery и активировать кнопку

Получить текущий порядок определенного атрибута элементов в классе как массив в сортируемом jquery-ui

Вкладки Javascript — как добавить хэштеги в URL?

Создание динамических ссылок с помощью JQuery — индивидуальный идентификатор сообщения

Многоуровневое html-меню, управляемое jquery

Базовый javascript не работает должным образом

Обратный отсчет с помощью jquery

Как мне вызвать разные значения каждого столбца в моей таблице Mysql с одинаковым номером счета-фактуры?

Как лениво загружать html-теги div с помощью cross-observer?

Заполните таблицу начальной загрузки с помощью JQuery и JSON

Почему при загрузке изображения не отображается текст предварительного просмотра изображения?

Ответы 2

Другие вопросы по теме

Похожие вопросы