В этой статье будет продемонстрирован метод загрузки изображения с использованием JavaScript и HTML.
Как загрузить простое изображение с помощью JavaScript/HTML?
Чтобы загрузить простое изображение с помощью JavaScript, сначала мы добавим тег изображения на HTML-страницу, а затем используем код JavaScript для загрузки и выбора изображения на веб-странице.
Для практического применения попробуйте указанные инструкции.
Пример
Прежде всего, следуйте приведенным инструкциям:
- Вставьте « <ввод> » и укажите тип ввода как « файл ».
- Этот тип «файла» определяет поле выбора файла и « Просматривать ” для загрузки файлов.
- “
” вставляет разрыв строки. - Затем вставьте « <изображение> HTML-тег и добавьте « идентификатор », чтобы указать уникальный идентификатор с определенным именем.
- “ источник ”, используемый для добавления URL-адреса медиафайла:
< бр >
< идентификатор изображения '=' 'моё изображение' источник '=' '#' >
Можно заметить, что параметр файла был создан, и он может отображать имя изображения только после принятия его ввода:
Теперь внутри « <скрипт> », используйте следующий код:
< сценарий >
окно. addEventListener ( 'нагрузка' , функция ( ) {
документ. селектор запросов ( 'вход [тип = 'файл']' ) . addEventListener ( 'изменять' , функция ( ) {
если ( этот . файлы && этот . файлы [ 0 ] ) {
варимг '=' документ. получитьэлементбиид ( 'img_content' ) ;
изображение в процессе '=' ( ) => {
URL-адрес . отзывОбъектURL ( изображение источник ) ;
}
изображение источник '=' URL-адрес . createObjectURL ( этот . файлы [ 0 ] ) ;
}
} ) ;
} ) ;
сценарий >
В приведенном выше фрагменте кода:
- “ добавить прослушиватель событий () ” Метод JavaScript позволяет вставлять или присоединять к элементу определенный обработчик событий.
- “ селектор запросов() ” — это метод, который используется для возврата первого элемента в конкретном документе, который связан с конкретным селектором.
- “ получитьэлемент по идентификатору() ” используется для получения элемента с использованием определенного идентификатора. Для этого в качестве параметра передается значение.
- “ отозвать URL-адрес объекта () ” освобождает существующий URL-адрес объекта, созданный с использованием URL-адреса. Для этого в качестве параметра этого метода передается URL-адрес изображения.
- “ создатьОбъектURL() ” — это статический метод JavaScript, который делает определенную строку URL-адресом, представляющим объект, переданный в параметре.
Выход
Можно заметить, что мы успешно загрузили простое изображение.
Заключение
Чтобы загрузить простое изображение с помощью JavaScript, используйте « добавить прослушиватель событий () », который позволяет вставлять или присоединять определенный обработчик событий к элементу. Затем получите доступ к определенному элементу по идентификатору и используйте « отозвать URL-адрес объекта () ' и ' создатьОбъектURL() методы. В этом посте описан простой метод загрузки изображений с использованием JavaScript/HTML.